0

私は HTML5 の初心者ですが、HTML の経験は豊富です。canvas について学んでいて、プログラムを作ろうと思いました。これで、ユーザーのマウスダウンとマウスアップを処理し、マウスの座標に従って変数の値を設定していました。それから彼らの助けを借りて、私はキャンバス上の適切に描かれていない線をなでていました.

これを達成するために私が行った作業：

HTML

<script type="text/javascript" src="jquery.min.js"></script>
<script src="bhaiya.js"></script>
<canvas id="myCanvas"  style="height: 100%; width: 100%;">
</canvas>

JS

$(document).ready(function() {
    var $x1 = 0;
    var $x2 = 0;
    var $y1 = 0;
    var $y2 = 0;

    $(this).mousedown(function(e){
        $x1 = e.pageX;
        $y1 = e.pageY;
    });

    $(this).mouseup(function(e){
        $x2 = e.pageX;
        $y2 = e.pageY;

        var c = document.getElementById("myCanvas");
        var context = c.getContext("2d");
        context.moveTo($x1, $y1);
        context.lineTo($x2, $y2);
        context.stroke();
    });
});

何が問題ですか？どんな助けでも大歓迎です！:)

4

2 に答える 2

2

1) 描画がぼやけていて、指定した x と y に従っていないように見えるという事実に悩まされている場合は、次のように修正できます。

var c = document.getElementById("myCanvas");
c.width = c.clientWidth;
c.height = c.clientHeight;

2）ドキュメントの左上隅に正確にない場合、キャンバスの位置によるオフセットを考慮する必要があります。

$x1 = e.pageX-c.offsetLeft;
$y1 = e.pageY-c.offsetTop;

デモンストレーション

実際のアプリケーションでは、毎回コンテキストを再作成するべきではないことに注意してください。この場合、必要に応じて (おそらくクリックごとに) 新しいパスを開始します。

于 2013-06-09T09:38:21.260 に答える