使用Canvas，HMTL5在鼠標移動上繪圖嗎？

Question

我想要實現的是一種簡單的功能，即在單擊鼠標時在畫布上繪制線條。

我已經在網上查看了代碼，並試圖自己實現它，但是它不起作用。

至今：

<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），我懷疑我必須添加此代碼才能使這些部分發揮預期的作用？

Answer 1

粗略瀏覽一下，您會在第2行的末尾缺少“>”。

Answer 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>

使用Canvas，HMTL5在鼠標移動上繪圖嗎？

問題描述

2 個解決方案

解決方案1
0 2014-04-17 18:27:26

解決方案2
0 2014-04-17 19:07:13

使用Canvas，HMTL5在鼠標移動上繪圖嗎？

問題描述

2 個解決方案

解決方案1 0 2014-04-17 18:27:26

解決方案2 0 2014-04-17 19:07:13

解決方案1
0 2014-04-17 18:27:26

解決方案2
0 2014-04-17 19:07:13