添加鼠標事件畫布繪圖

你好夥計們我需要通過javascript添加鼠標事件到下面的代碼...我已經添加了觸摸事件，以便在桌面瀏覽器中測試我需要添加鼠標事件..我試圖添加鼠標事件的addEventListener但似乎不起作用我不是prettty確保西隧錯了...添加鼠標事件畫布繪圖

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

感謝阿然

來源

2012-09-06 Ajain Vivek

試試這個。

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-06 15:00:12 JSJ

，如果你的問題是與insertImage.addEventListener('click',loadData.imageLoad, false);不顯示圖像當u點擊，這是因爲

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-06 15:04:20 yngccc

添加鼠標事件畫布繪圖

回答

相關問題