2

ユーザーがキャンバス内の任意の場所をクリックすると、円が表示される簡単なスクリプトを作成しています。

スクリプトは機能しますが、正しくありません。どういうわけか、クリックイベントが発生し、円の中心が一致しない座標。なぜ何かアイデアはありますか？

コードは次のとおりです。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
     $("#special").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        /* var c=document.getElementById("special"); */
        var ctx= this.getContext("2d"); /*c.getContext("2d");*/
        ctx.beginPath();
        ctx.arc(x, y, 10,0, 2*Math.PI);
        ctx.stroke();

        $('#status2').html(x +', '+ y); 
   }); 
})  

</script>
<body> 
    <h2 id="status2">0, 0</h2>
    <canvas style="width: 500px; height: 500px; border:1px ridge green;" id="special">

    </canvas>
</body>
</html>
4

2 に答える 2

6

次のように、幅と高さのプロパティをキャンバス要素に追加する必要があります:(スタイルに合わせて）

 <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special">

このフィドルをチェックしてください：

http://jsfiddle.net/7xQZ2/

幅と高さのパラメータを追加すると、キャンバスのピクセル数が指定されます。スタイル1は、表示するサイズを示しています（すべてが引き伸ばされます）。

于 2013-03-26T14:40:16.647 に答える
4

canvas要素には、heightタグとwidthタグが必要です。特にHTML5表記の場合、これはちょっと奇妙です。

これをドキュメントの準備完了ステートメント（キャンバスの描画コードの前）に追加してみてください。jQueryがCSSスタイルに基づいて追加します。

$('#special').attr('height', $('#special').css('height'));
$('#special').attr('width', $('#special').css('width'));

属性値の手動追加を使用することに対するこの方法のプラス面は、ディメンションを1回だけ保存する必要があることであり、外部スタイルシートを使用する場合は将来の混乱を排除します。

CSS

#special {
    width: 500px;
    height: 500px;
    border:1px ridge green;
}

HTML

<canvas id="special">Not supported</canvas>

JSfiddle

于 2013-03-26T14:47:28.890 に答える