1

<canvas>現在、HTML5とJavaScriptのタグに2つの円があります。

今、私はマウスオーバーとクリックに基づいて変化する画像を追加しようとしています(完了)。

これは基本的に、ユーザーがボタンの上にマウスを置くと色が追加で変更される再生/一時停止ボタンの実装です。

イベントはオブジェクトではないため、HTML5の図形でイベントがどのように機能するかを理解できないようです...現時点での私のコードは次のとおりです。

window.onload = function() {

      var canvas = document.getElementsByTagName('canvas')[0];
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;


      //Outer circle
      context.beginPath();  
      context.arc(centerX, centerY, 150, 0, Math.PI * 2, false);
      context.fillStyle = "#000";
      context.fill();
      context.stroke();

      //Inner cicle
      context.beginPath();
      context.arc(centerX, centerY, 75, 0, Math.PI * 2, false);
      context.fillStyle = "#fff";
      context.fill();
      context.stroke();

      //Play / Pause button
      var imagePlay = new Image();
      var imageHeight = 48/2;
      imagePlay.onload = function() {
        context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight);
      };
      imagePlay.src = "images/play.gif";

}
  1. で作成された図形のイベントを処理する方法は<canvas>

  2. <canvas>別の画像と交換するときに画像をクリーンアップ/削除するにはどうすればよいですか?

4

5 に答える 5

2

技術的には、キャンバスに描画された形状にマウスイベントを登録する方法はありません。ただし、Raphael(http://raphaeljs.com/)などのライブラリを使用すると、シェイプの位置を追跡できるため、どのシェイプがマウスイベントを受信して​​いるかを把握できます。次に例を示します。

var circle = r.circle(50, 50, 40);

circle.attr({fill: "red"});

circle.mouseover(function (event) {
    this.attr({fill: "red"});
});

ご覧のとおり、この方法は非常に簡単です。形状を変更する場合にも、このライブラリが役立ちます。それがないと、変更を加えるたびにすべてを再描画する方法を覚えておく必要があります

于 2012-06-23T18:55:03.290 に答える
1

簡単な答えはあなたができないということです。クリックイベントの座標を見つけてオプションを実行するかどうかを計算するか、areaタグとmapタグを使用して、canvas要素をオーバーレイする必要があります。キャンバスを変更するには、clearRect関数を使用して、すべての上に長方形をペイントしてから、必要なものを再描画します。

于 2012-06-23T18:56:31.317 に答える
1
  1. キャンバスに描かれた形状を追跡する「組み込み」の方法はありません。それらはオブジェクトとして扱われるのではなく、領域内のピクセルとして扱われます。キャンバスに描画された図形のイベントを処理する場合は、各図形がカバーする領域を追跡し、マウスの位置に基づいてイベントをトリガーする図形を決定する必要があります。

  2. 何かに置き換えたい場合は、他の形状の上に描画するだけです。globalCompositeOperationを確認することをお勧めします。

図面をオブジェクトとして扱いたい場合は、キャンバスの代わりにSVGを使用することをお勧めします。

もう1つのオプションは、ボタンを使用してから、CSSを使用してボタンのスタイルを設定することです。

基本的に、あなたが今していることは、実際には意図された目的やキャンバスの使用ではありませんでした。鉛筆を使って釘を打ち込むようなものです。仕事に間違った道具を使っているのです。

于 2012-06-23T19:00:13.763 に答える
0

キャンバスに描画されたオブジェクトのクリックイベントを作成できないことは事実ですが、回避策があります。キャンバスをDIVタグでラップしてから、CANVASタグの上のDIVタグ内に画像を追加します。

<div id="wrapper">
    <img src="img1.jpg" id="img1"></img>
    <canvas id="thecanvas"></canvas>
</div>

次に、CSSを使用して画像をposition:absoluteにし、left:* pxおよびtop:* px属性を使用して、通常描画するキャンバス上に画像を配置します。

#img1{
position:absolute;
left: 10px;
top: 10px;
 }

次に、キャンバス上に配置された画像にクリックイベントを追加して、キャンバスをクリックしているような印象を与えることができます(以下の例ではjQueryのclick()関数を使用しています)

$( "#img1" ).click(function(){
    alert("Thanks for clicking me");
});
于 2013-04-19T17:30:33.600 に答える
0

レイをキャンバスにキャストし、レイとの交差について画像を手動でテストできます。押すようにそれを見て、画面に光線を送る必要があります。あなたは書くべきです

objectsUnderPoint( x, y );

x、yで光線と交差するすべての画像の配列を返す関数。

これが唯一の本当の正しい答えであり、これは通常3Dエンジンでも行われる方法です。

于 2014-07-23T18:02:51.183 に答える