Question

Hello Guys我需要通过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>

由于阿然

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

Answer 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);};
})();

为画布绘图添加鼠标事件

2 个答案: