用 Canvas，HTML5 绘制鼠标移动？答案

【问题标题】：Drawing on mouse move with Canvas, HMTL5?用 Canvas，HTML5 绘制鼠标移动？
【发布时间】：2014-04-17 18:23:36
【问题描述】：

我想要实现的是一个简单的功能，可以在单击鼠标时在画布上绘制线条。

我在网上查看了代码，并试图自己实现它，但它不起作用。

到目前为止：

<html>
<canvas id="myCanvas" width="400" height="500"> </canvas>
</html>

<script type="text/javascript">
var el = document.getElementById('myCanvas');
    var ctx = el.getContext('2d');
    var isDrawing;

    el.onmousedown = function(e) {

      isDrawing = true;
      ctx.moveTo(e.clientX, e.clientY);
    };

    el.onmousemove = function(e) {
      if (isDrawing) {
        ctx.lineTo(e.clientX, e.clientY);
        ctx.stroke();
      }
    };
    el.onmouseup = function() {

      isDrawing = false;
    };

</script>

但是，这不会在画布上输出任何内容。我不完全理解代码的事件处理方面（即 e.clientX、e.clientY）我怀疑我必须将这些部分添加到此代码中才能达到预期的效果？

【问题讨论】：

它对我有用，你的画布元素没有关闭顺便说一句。 jsFiddle
我在粘贴时错过了它，但它在我的代码中
哇，奇怪的是它在 jsFiddle 中工作，完全相同的代码在我的实际页面中不起作用。
如果这是你的完整代码，你就是一个。缺少文档类型和 b。缺少包含您的内容的body。开始调试明显无效的东西并没有多大意义。
@m90，这不是我页面的实际代码，只是相关部分。

标签： javascript html canvas

【解决方案1】：

粗略一看，您在第 2 行末尾缺少一个“>”。

【讨论】：

【解决方案2】：

几个问题：

通过画布的偏移量调整鼠标位置（除非画布位于浏览器的左上角）
在 mousemove 中执行所有绘图命令（否则您将使用每个 ctx.stroke 重新绘制线条）

这是示例代码和演示：http://jsfiddle.net/m1erickson/kkLrT/

<!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 BB=canvas.getBoundingClientRect();
    var offsetX=BB.left;
    var offsetY=BB.top;

    var lastX,lastY;
    var isDown=false;

    canvas.onmousedown=handleMousedown;
    canvas.onmousemove=handleMousemove;
    canvas.onmouseup=handleMouseup;


    function handleMousedown(e){
         e.preventDefault();
         e.stopPropagation();
         lastX=e.clientX-offsetX;
         lastY=e.clientY-offsetY;
         isDown=true;
    }

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

    function handleMousemove(e){
         e.preventDefault();
         e.stopPropagation();

         if(!isDown){return;}

         var mouseX=e.clientX-offsetX;
         var mouseY=e.clientY-offsetY;

         ctx.beginPath();
         ctx.moveTo(lastX,lastY);
         ctx.lineTo(mouseX,mouseY);
         ctx.stroke();

         lastX=mouseX;
         lastY=mouseY;
    }


}); // end $(function(){});
</script>
</head>
<body>
    <h4>Drag mouse to draw.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

【讨论】：

所以只需使用 window.onload 而不是 $(function(){})。我的答案都不需要 jQuery ;=)