2

fillrect（x、y、width、height）で2つの奇妙な問題が発生しています。

  1. 「高さ」の値に2を掛けています

  2. Xとyはマウスの位置に設定されているはずですが、長方形は左下にずれており、マウスが左下に移動するとさらに遠くになります。

このコードはビデオチュートリアルからのものであり、誰も同じ問題を抱えているとコメントしていないので、コードは男とビデオ、そして他のすべての人に役立つようです。とにかくここにコードがあります：

function doFirst(){
    canv = document.getElementById('canvas');
    canvas = canv.getContext('2d');

    document.addEventListener("mousemove", onMouseMove, false);
}

function onMouseMove(e){
    canvas.clearRect(0, 0, canv.width, canv.height);
    var x = e.clientX;
    var y = e.clientY;
    canvas.fillRect(x, y, 50, 50);
}

window.addEventListener("load", doFirst, false);

チュートリアルのステップを見逃したのではないかと思い、何度もチェックした後、マウスリスナーなしで長方形を描画するように単純化することにしましたが、キャンバスは高さ2倍、y位置の約2倍で描画しました。

function doFirst(){
    canv = document.getElementById('canvas');
    canvas = canv.getContext('2d');

    canvas.fillRect(10, 10, 50, 50);
}

window.addEventListener("load", doFirst, false);

先日、HTML5キャンバスで遊び始めたとき、fillRect関数は正常に機能していましたが、どうなりましたか？どうやって壊したの？

4

1 に答える 1

17

これは、CSSを使用してキャンバスの幅と高さを設定しようとしているために発生すると思います。

<!--Sets size of the canvas on the page-->
<canvas id="canvas" style="width:500px; height:500px;"></canvas>

代わりに、これを使用してください：

<!--Sets drawing surface size-->
<canvas id="canvas" width="500" height="500"></canvas>

「幅」および「高さ」属性は、描画面のサイズを示します。デフォルトは300x150です。キャンバスのCSSの幅と高さを設定すると、描画サーフェスが拡大または縮小されますが、サーフェスのピクセル数は変更されません。fillRect「HTMLページピクセル」ではなく、「描画面」ピクセルで座標を取ります。

于 2012-11-26T01:33:44.370 に答える