HTML5キャンバスとマウスイベントが発行される

Question

お客様の署名欄を含むHTML5ページを作成しようとしています。これは、ほとんどの場合、タブレットで使用されます。これはCanvas要素とマウスのJavaScriptイベントで行われます。

問題1：Y部分は完全に機能しますが、キャンバスを300に設定するとX部分のみが機能します。幅が500の場合、X部分はx座標で0になります。ユーザーx-coord 300に描画すると、画面上の線はキャンバス上の500ピクセルのマークになります。私のコードでは何も設定せずに300pxに設定するので、何が起きているのか分かりません。

問題2：タブレットのスクロールを停止し、ユーザーがキャンバスにログインできるようにするコードがあります（JavaScriptで「防止」varを参照）。それは全く機能しません。

HTML：

<div id="canvasDiv"> 
    <canvas id="canvasSignature"></canvas> 
</div> 

はCSS：（500pxなどに幅を100％アップを行い、常に150ピクセル高）

#canvasDiv 
{ 
    float: left; 
    width: 100%; 
    height: 150px; 
    max-width: 500px; 
} 

#canvasSignature 
{ 
    width: 100%; 
    height: 100%; 
    background-color: #F0F0F0; 
    border: 1px solid Black; 
    cursor: crosshair; 
} 

はJavaScript：

<script type="text/javascript"> 
    $(document).ready(function() { 
     initialize(); 
    }); 

    var prevent = false; 

    // works out the X, Y position of the click INSIDE the canvas from the X, Y position on the page 
    function getPosition(mouseEvent, element) { 
     var x, y; 
     if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) { 
     x = mouseEvent.pageX; 
     y = mouseEvent.pageY; 
     } else { 
     x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
     } 

     x = x - element.offsetLeft; 
     return { X: x, Y: y - element.offsetTop }; 
    } 

    function initialize() { 
     // get references to the canvas element as well as the 2D drawing context 
     var element = document.getElementById("canvasSignature"); 
     var context = element.getContext("2d"); 

     // start drawing when the mousedown event fires, and attach handlers to 
     // draw a line to wherever the mouse moves to 
     $("#canvasSignature").mousedown(function (mouseEvent) { 
     var position = getPosition(mouseEvent, element); 

     context.moveTo(position.X, position.Y); 
     context.beginPath(); 
     prevent = true; 

     // attach event handlers 
     $(this).mousemove(function (mouseEvent) { 
      drawLine(mouseEvent, element, context); 
     }).mouseup(function (mouseEvent) { 
      finishDrawing(mouseEvent, element, context); 
     }).mouseout(function (mouseEvent) { 
      finishDrawing(mouseEvent, element, context); 
     }); 
     }); 

     document.addEventListener('touchmove', function (event) { 
     if (prevent) { 
      event.preventDefault(); 
     } 

     return event; 
     }, false); 
    } 

    // draws a line to the x and y coordinates of the mouse event inside 
    // the specified element using the specified context 
    function drawLine(mouseEvent, element, context) { 

     var position = getPosition(mouseEvent, element); 

     context.lineTo(position.X, position.Y); 
     context.stroke(); 
    } 

    // draws a line from the last coordiantes in the path to the finishing 
    // coordinates and unbind any event handlers which need to be preceded 
    // by the mouse down event 
    function finishDrawing(mouseEvent, element, context) { 
     // draw the line to the finishing coordinates 
     drawLine(mouseEvent, element, context); 

     context.closePath(); 

     // unbind any events which could draw 
     $(element).unbind("mousemove") 
       .unbind("mouseup") 
       .unbind("mouseout"); 
     prevent = false; 
    } 
</script> 

Answer 1

#canvasSignature 
{ 
    width: 100%; 
    height: 100%; 
    background-color: #F0F0F0; 
    border: 1px solid Black; 
    cursor: crosshair; 
} 

このいいえです！大まかには、キャンバスのCSSの幅/高さを変更する必要はありません。

300x150のキャンバスを文字通り伸ばして、画面全体を斜めにします。おそらくマウスの問題の99％を占めています。

理由は、y方向でうまくいくように見えるのは純粋に偶然です：キャンバスはデフォルトで300x150で、divが150であるので、CSSによって歪みはありません。しかし、あなたがdivが200になることを望むなら、あなたはそこにも問題を見るでしょう！

あなたはCSSプロパティとしてない属性としてキャンバスの高さと幅を設定する必要があり、：JavaScriptで

<canvas id="canvasSignature" width="500" height="150"></canvas> 

さも：

var can = document.getElementById('canvasSignature'); 
can.width = 500; 
can.height = 150; 

あなたがしたいように見えますキャンバスの幅が動的に変化します。これは問題ありませんが、いくつかのうちの1つを実行する必要があります。 1つは、ウィンドウのonresizeイベントを使用し、キャンバスの幅をdivのclientWidthに等しく設定します（clientWidthがもちろん変更されている場合）。もう1つは、0.5秒おきに同じことを確認する簡単な一般的なタイマーを行うことです。

---

getPosition関数の有効性を確認していないことに注意してください。別の問題かもしれない他のエラーがあるかもしれませんが、おそらくOKです。