0

キャンバスに追加した画像をボタンとして機能させたい。画像をクリックすると、アラートが表示される必要があります。また、キャンバスの残りの部分をクリックすることも禁止する必要があります。これどうやってするの？ありがとう。

<script>
window.onload = function(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var quizbg = new Image();
    quizbg.src = "basla.png";
    context.drawImage(quizbg,0,0);
}

<script>

<body>
<div id="ccontainer">
<canvas id="myCanvas" width="600" height="400"></canvas>
</div>
</body>
4

3 に答える 3

1

Kineticjsチュートリアルをご覧ください（必要なものが簡単になります）

于 2013-03-01T12:52:50.490 に答える
1

このようにしてください、 

<script>
    window.onload = function(){
            var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        var quizbg = new Image();
        quizbg.src = "basla.png";
        quizbg.onload = function() {
            context.drawImage(quizbg,0,0);
        }
        canvas.onclick= function() { 
            alert('Bike');
            canvas.onclick = false;
        }  
    }
    </script>



    <body>
    <div id="ccontainer">
    <canvas id="myCanvas" width="600" height="400"></canvas>
    </div>
    </body>

実例、http：//jsfiddle.net/wcxc2/

于 2013-03-01T13:00:06.507 に答える
0

すべてのロジックは自分で作成する必要があります。

1）使用

canvas.addEventListener("click", function(e) {
  e.pageX, e.pageY;
});

マウスをバインドする

2）クリックがボタンの長方形内にあるかどうかを確認します

if(inRect(e.pageX, e.pageY, buttonX, buttonY, buttonWidth, buttonHeight)) {
  alert("the button has been clicked");
}

もちろん、inRect関数を作成する必要があります:)

もう1つは、キャンバスが[0、0]にない場合、イベントの位置からオフセットを差し引く必要があるということです。

これがcanvasqueryhttp://cssdeck.com/labs/svleh8dqを使用したロジックです。

于 2013-03-01T13:20:25.387 に答える