3

私を助けてください：

  • onmousedown=イベントを割り当てることができるクリック可能な領域を下のキャンバスに作成します。非表示のDIVを使用してこれを行う方法は知っていますが、キャンバスでこれを行うには、私にはわからない、よりエレガントな方法があると思います。

  • 領域の1つをクリックしたときに、画像名を関数に渡して、表示されている画像を別の画像に変更してから、マウスアップに戻します。

1つのリージョンと1つのマウスダウン/マウスアップの例を見せていただければ、残りの作業を行うことができます...ありがとうございます。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

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

        <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var img=new Image();
        img.onload = function(){
        ctx.drawImage(img,0,0);
        };
        img.src="firstImage.gif";
        </script>

        /////////HERE NEED/////////
                    CREATE CLICKABLE REGION <region>
                    <region>
                    onmousedown=changeCanvasImage(secondImage.gif) //change image on click
                    onmouseup=changeCanvasImage(firstImage.gif)  /change it back when done
        </region>
</body>
</html>
4

1 に答える 1

5

キャンバス要素はイベントを発生させることができますが、キャンバス内のグラフィック要素は発生しません。これを行うには、クリックされたときにキャンバス上のマウスの位置を検出して値をキャンバス内の何かに関連付けることによって自分で実装するか、検出を処理する利用可能な多くのキャンバスライブラリの1つを使用する必要がありますあなたのために。

于 2012-05-23T00:27:09.753 に答える