Question

我想要一个我添加到画布中的图像作为按钮工作。单击图像时，必须显示警报。还必须禁止单击画布的其余部分。我怎样才能做到这一点？谢谢。

<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>

Answer 1

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

Answer 2

这样做，

<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/

Answer 3

你必须自己编写所有逻辑。

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

的逻辑

作为按钮的图像

3 个答案: