2

ユーザーのマウスがjQueryを使用してHTML5キャンバス上の行に当たったかどうかを検出する方法を理解しようとしています。

キャンバスラインを生成するコードは次のとおりです。

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(40,0);
        ctx.lineTo(40,360);
        ctx.stroke();
        ctx.moveTo(80,400);
        ctx.lineTo(80,40);
        ctx.stroke();
        ctx.moveTo(120,0);
        ctx.lineTo(120,360);
        ctx.stroke();
        ctx.moveTo(160,400);
        ctx.lineTo(160,40);
        ctx.stroke();
    };
</script>

ここで別の質問で実際に見つけた変更されたjQueryスクリプトを使用していますが、キャンバス内の線、主に白から黒への色の違いを検出する方法がわかりません。これは画像でできることは知っていますが、このようなものを持っている人は誰も見たことがありません。

私の本当の質問は、jQueryを使用してキャンバス要素の色の変化を検出する方法はありますか？

4

1 に答える 1

6

javascriptで行うことが可能です。実際、上記の例ではjQueryを使用していません。これを行う簡単な方法は、キャンバスからピクセルデータを取得し、指定されたxおよびy位置のアルファをチェックすることです。アルファが0に設定されていない場合は、キャンバスに何かが描かれています。以下は、それを実行するために私が実際にすばやくまとめた関数です。

ライブデモ

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    width = 400;
height = 400;

canvas.width = canvas.height = 200;

// draw
ctx.moveTo(40, 0);
ctx.lineTo(40, 360);
ctx.stroke();
ctx.moveTo(80, 400);
ctx.lineTo(80, 40);
ctx.stroke();
ctx.moveTo(120, 0);
ctx.lineTo(120, 360);
ctx.stroke();
ctx.moveTo(160, 400);
ctx.lineTo(160, 40);
ctx.stroke();

function detectLine(x, y) {
    var imageData = ctx.getImageData(0, 0, width, height),
        inputData = imageData.data,
        pData = (~~x + (~~y * width)) * 4;

    if (inputData[pData + 3]) {
        return true;
    }

    return false;
}

canvas.addEventListener("mousemove", function(e){
    var x  = e.pageX,
        y = e.pageY;
    console.log(detectLine(x, y));
});

console.log(detectLine(40, 100));
console.log(detectLine(200, 200));
于 2013-03-10T18:30:01.707 に答える