我试图通过使用鼠标事件在画布上绘制一条线

我正在尝试使用mousedown，mousemove，mouseup事件在画布上绘制一条线，但是我无法设置坐标以在画布上绘制一条线。在这里，我使用以下JavaScript代码：

function line() 
{
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.onmousedown = startLine;
    canvas.onmouseup =   drawLine;
    canvas.onmouseout = stopLine;
    //canvas.onmousemove =drawLine;
};
function startLine(e) 
{
    isLine = true;
    context.beginPath();
    context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}
function drawLine(e) 
{
    if (isLine==true) 
    {
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        context.lineTo(x ,y);
        context.stroke();
        context.closePath();
    }
    cPush();
}  
function stopLine() 
{
    isLine = false;
}

当我使用mousemove用于drawLine()方法的事件时，它正在绘制多行。您可以租赁我的代码中有什么问题？

基本上，您需要重构代码才能进行beginpath moveto lineto lineto ploke proke proke proke stroke in thememove。

否则，您将获得这些线...

在Mousedown中：保存startx/starty并设置ISDOWN标志以指示拖动已经启动：

function handleMouseDown(e){
  e.preventDefault();
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);
  isDown=true;
}

在Mousemove中：绘制从startx/y到鼠标x/y和reset startx/y = mousex/y y

的新线路

function handleMouseMove(e){
  if(!isDown){return;}
  e.preventDefault();
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);
  ctx.beginPath();  // use beginPath for every segment of the line
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke();
  startX=mouseX;
  startY=mouseY;
}

在MouseUp中：清除ISDOWN标志以表明阻力已结束：

function handleMouseUp(e){
  e.preventDefault();
  isDown=false;
}

以下是代码和小提琴：http：//jsfiddle.net/m1erickson/hzng4/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();
    var isDown=false;
    var startX;
    var startY;

    function handleMouseDown(e){
      e.preventDefault();
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      isDown=true;
    }
    function handleMouseUp(e){
      e.preventDefault();
      isDown=false;
    }
    function handleMouseOut(e){
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      isDown=false;
    }
    function handleMouseMove(e){
      if(!isDown){return;}
      e.preventDefault();
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      // Put your mousemove stuff here
      ctx.beginPath();
      ctx.moveTo(startX,startY);
      ctx.lineTo(mouseX,mouseY);
      ctx.stroke();
      startX=mouseX;
      startY=mouseY;
    }
    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

尝试以这种方式（演示）：

function line() {
    canvas = document.getElementById("drawingCanvas");
    context = canvas.getContext("2d");
    canvas.onmousedown = startLine;
    canvas.onmouseup = canvas.onmouseout = stopLine;
    canvas.onmousemove = drawLine;
};
function startLine(e) {
    isLine = true;
    context.beginPath();
    context.moveTo(startX = (e.pageX - canvas.offsetLeft),
    startY = (e.pageY - canvas.offsetTop));
}
function drawLine(e) {
    if (isLine) {
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;
        context.clearRect(0, 0, 300, 150);    // width = 300, height = 150
        context.beginPath();
        context.moveTo(startX, startY);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();
    }
    //cPush();
}
function stopLine() {
    isLine = false;
}

相关内容

最新更新

热门标签：