Javascript 作为按钮的图像_Javascript_Image_Html_Canvas

Javascript 作为按钮的图像

javascript image html canvas

Javascript 作为按钮的图像,javascript,image,html,canvas,Javascript,Image,Html,Canvas,我希望我添加到画布中的图像可以用作按钮。当我单击图像时，必须显示一个警报。还必须禁止单击画布的其余部分。我该怎么做？谢谢 <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var quizbg = new Image(); quizbg.src =

我希望我添加到画布中的图像可以用作按钮。当我单击图像时，必须显示一个警报。还必须禁止单击画布的其余部分。我该怎么做？谢谢

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


window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var quizbg=新图像（）；
quizbg.src=“basla.png”；
drawImage（quizbg，0,0）；
}

看一看教程（你想要的更简单）

像这样做

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


window.onload=函数（）{
var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
var quizbg=新图像（）；
quizbg.src=“basla.png”；
quizbg.onload=函数（）{
drawImage（quizbg，0,0）；
}
canvas.onclick=function（）{
警惕（“自行车”）；
canvas.onclick=false；
}  
}

例如，您必须自己编写所有逻辑

1）使用

绑老鼠

2）检查单击是否在按钮的矩形内

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

当然，您必须在rect函数中编写：）

另一件事是，如果画布不在[0，0]，则必须从事件位置减去其偏移量

下面是使用canvasquery的逻辑

这是有效的。我也有一个问题。此代码只能工作一次。然后图像及其事件将被隐藏。我如何提供此功能？如果我有两个不同的图像，我该怎么做？我尝试了代码，但第二张图像的警报只显示出来。你需要保存和访问每个图像的坐标！发布另一个问题！谢谢你能告诉我怎么走吗？我应该处理这段代码还是研究新函数？我可以在同一个脚本中使用两个不同的click函数吗？当然可以-addEventListener可以绑定任意多个不同的函数

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