0

Javascript を介して以下のコードにマウス イベントを追加する必要があります... デスクトップ ブラウザーでテストするために、既にタッチ イベントを追加しました。マウス イベントを追加する必要があります。何が間違っていたのかよくわかりません...

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

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 に答える
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 に答える