0

こんにちは、皆さん、私はCanvasを使用してマウスで描画する方法に取り組んでいます。これは私がどれだけ離れているかです：

function drawdraw(){
    test = document.getElementById('test');
    ctx = test.getContext('2d');

    window.addEventListener("mousemove", drawing,false);
}

function drawing(e){
    ctx.clearRect(0,0,500,200);
    var xPos = e.pageX-test.offsetLeft;
    var yPos = e.pageY-test.offsetTop;
    ctx.fillRect(xPos, yPos,30,30);
}
window.addEventListener("load", drawdraw,false);

私の現在の問題は、正しいカーソル座標がないことです。e.clientX、e.clientX、および上記の例を試しました。

キャンバスを動的に移動できるようにしたいのですが、マウスの座標をキャンバスの左上で0,0、右下で500,200にします。言い換えれば、ページの座標ではなく、キャンバス内に座標を配置したいだけです。誰？:)

ところで。私はjavascriptソリューションに興味があるので、可能であればjQueryを避けたいと思います。

4

1 に答える 1

1

testは関数のローカル変数であり、関数drawdrawでも使用していdrawingます。グローバル変数として宣言する必要があります。

于 2013-02-16T14:55:05.070 に答える