0

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

2 回答 2

0

试试这个。

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/

于 2012-09-06T15:00:12.623 回答
0

如果您的问题是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);};
})();
于 2012-09-06T15:04:20.153 回答