0

キャンバスについて学び始めたばかりなので、Google が答えてくれない簡単な質問があります。

まず、幅 700 ピクセル、高さ 700 ピクセルのキャンバス要素があります。したがって、私のキャンバスの制限はRectです。しかし、Rect にはしたくありません。Circle が必要です。CSS のみを使用すると、スタイルが変わります。

2 つ目の質問は、イベントについてです。新しいオブジェクトを描画する変数があります。誰かがオブジェクトをクリックすると、何かが起こるはずです。しかし、それが要素ではなくJavaScriptの変数である場合、どうすればオブジェクトをクリックできますか?

本当にありがとうございました！

4

2 に答える 2

1

CSS を使用すると、作業中のコードの領域を視覚的に区切ることができます。「border-radius」プロパティがそれを行います。スクリプトで円の領域内で特定のマウス イベントが必要な場合は、基本的な計算を適用して、マウスが円の「内側」にあるか「外側」にあるかを判断できます。

一方、「変数をクリックする」ことはできませんが、定義済みの高さと幅のプロパティを使用して空の要素 (suck as または要素) を定義し、クリック イベントをバインドしてから、イベントをスクリプト内の変数に関連付けることができます。

于 2012-09-25T17:51:34.260 に答える
1

http://jsfiddle.net/XQaUT/1/

clip関数を使用してキャンバスをマスクできます。

function maskCanvas(){
    ctx.beginPath(); 
    ctx.arc(rad, rad, rad, 0, Math.PI * 2, false);   
    ctx.clip();
}

maskCanvas();

キャンバスに何か他のものを描画する前に、これを行う必要があります。

ctx.fillRect(0,0,100,100);

最後Pathに作成したものはキャンバスに記憶されます

ctx.beginPath();
ctx.fillStyle = "#f00";
ctx.arc(rad,rad,50, 0, Math.PI * 2, false);
ctx.fill();

isPointInPathそのため、マウス クリックがそのパス内にあるかどうかを判断するために使用できます。

canvas.onclick = function(e){
    console.log(ctx.isPointInPath(e.x,e.y));
};​
于 2012-09-25T17:55:32.040 に答える