为画布绘图添加鼠标事件答案

【问题标题】：Add Mouse Events for Canvas Drawing为画布绘图添加鼠标事件
【发布时间】：2019-10-21 21:23:19
【问题描述】：

我需要通过 Javascript 将鼠标事件添加到下面的代码中...我已经添加了触摸事件以便在桌面浏览器中进行测试我需要添加鼠标事件..我尝试将鼠标事件添加到 addEventListener 但似乎不起作用我不太确定出了什么问题...

 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
 <meta charset="utf-8"> 
<meta name="viewport" content="width=768px, maximum-scale=1.0" /> 
 <title>rsaCanvas</title> 
<script type="text/javascript" charset="utf-8"> 
window.addEventListener('load',function(){
    // get the canvas element and its context
    var canvas = document.getElementById('rsaCanvas');
    var insertImage = document.getElementById('insert');
    var context = canvas.getContext('2d');

    //load image and annotation method
    var loadData = {
        imageLoad: function(){
            var img = new Image();
            img.src = 'the_scream.jpg';
            context.drawImage(img,0,0);
        }
    };

    // create a drawer which tracks touch movements
    var drawer = {
        isDrawing: false,
        touchstart: function(coors){
            context.beginPath();
            context.moveTo(coors.x, coors.y);
            this.isDrawing = true;
        },
        touchmove: function(coors){
            if (this.isDrawing) {
                context.lineTo(coors.x, coors.y);
                context.stroke();
            }
        },
        touchend: function(coors){
            if (this.isDrawing) {
                this.touchmove(coors);
                this.isDrawing = false;
            }
        }
    };

    // create a function to pass touch events and coordinates to drawer
    function draw(event){
        // get the touch coordinates
        var coors = {
            x: event.targetTouches[0].pageX,
            y: event.targetTouches[0].pageY
        };
        // pass the coordinates to the appropriate handler
        drawer[event.type](coors);
    }

    // attach the touchstart, touchmove, touchend event listeners.
    canvas.addEventListener('touchstart',draw, false);
    canvas.addEventListener('touchmove',draw, false);
    canvas.addEventListener('touchend',draw, false);


    insertImage.addEventListener('click',loadData.imageLoad, false);

    // prevent elastic scrolling
    document.body.addEventListener('touchmove',function(event){
        event.preventDefault();
    },false);   // end body.onTouchMove

},false);   // end window.onLoad
</script> 

<style>
    #rsaCanvas{border:5px solid #000;}
</style>    

 </head> 
 <body> 
<div id="container"> 
  <canvas id="rsaCanvas" width="400" height="500"> 
    Sorry, your browser is not supported.
  </canvas> 
  <button id="insert">Insert Image</button> 
</div> 
  </body> 
   </html>

【问题讨论】：

标签： javascript html5-canvas mouseevent dom-events

【解决方案1】：

试试这个。

function init () {
  // ...
  // Attach the mousemove event handler.
  canvas.addEventListener('mousemove', ev_mousemove, false);
}

// The mousemove event handler.
var started = false;
function ev_mousemove (ev) {
  var x, y;

  // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { // Firefox
    x = ev.layerX;
    y = ev.layerY;
  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
    x = ev.offsetX;
    y = ev.offsetY;
  }

  // The event handler works like a drawing pencil which tracks the mouse 
  // movements. We start drawing a path made up of lines.
  if (!started) {
    context.beginPath();
    context.moveTo(x, y);
    started = true;
  } else {
    context.lineTo(x, y);
    context.stroke();
  }
}

来源http://dev.opera.com/articles/view/html5-canvas-painting/

【讨论】：

【解决方案2】：

如果您的问题是insertImage.addEventListener('click',loadData.imageLoad, false); 在您点击时没有显示图像，那是因为

 imageLoad: function(){
        var img = new Image();
        img.src = 'the_scream.jpg';
        context.drawImage(img,0,0);
}

注意 img.src 是异步的，要绘制图像呢

img.onload = (function() {
      var image = img;
      return function() {context.drawImage(image, 0, 0);};
})();

【讨论】：