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

这样做， 

<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 回答
1

看一下kineticjs教程（你想要的更容易）

于 2013-03-01T12:52:50.490 回答
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 函数:)

另一件事是，如果您的画布不在 [0, 0] 处，您将不得不从事件的位置减去它的偏移量。

这是使用 canvasquery http://cssdeck.com/labs/svleh8dq的逻辑

于 2013-03-01T13:20:25.387 回答