javascript - 图像作为按钮

标签 javascript image html canvas

我想要将添加到 Canvas 中的图像用作按钮。 当我单击图像时,必须显示警报。还必须禁止单击 Canvas 的其余部分。我怎样才能做到这一点? 谢谢。

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

最佳答案

这样做,

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

关于javascript - 图像作为按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15158203/

相关文章:

javascript - 阻止异步获取以在 webpacked 应用程序中完成

image - AMP HTML 如何支持图像优化?

html - 1px 宽的斜条纹

JavaScript 修复坏的 html 标签

javascript - Firebase - 从数据库数据生成表

r - 来自 R "image"函数的意外转置翻转输出

php - 如何使用 AJAX/JQuery 调用多个 PHP 脚本?

html - div 高度内的 div 的问题

javascript - 如何在不使用 Blob 的情况下向多部分请求添加内容类型

python - 使用 python 和 PIL 模块导入 PPM 图像