javascript - 如果单击 Canvas 中的图像,则会发出警报

标签 javascript image canvas click mouse

所以我在 Canvas 上有动画图像。它从左到右。我想要:

alert("Wokrs!");

如果我点击图像。有人知道该怎么做吗?这是我的代码:

    <head>
        <script src="events.js">
        </script>
        <script src="animation.js">
        </script>
<script>
window.onload = function(){
    var events = new Events("myCanvas");
    var canvas = document.getElementById("myCanvas");
    var c = canvas.getContext("2d");
    var anim = new Animation("myCanvas");


    var image = new Image();

    anim.setDrawStage(function()
    {
        c.clearRect(0, 0, 3000, 3000);
        c.drawImage(image, anim.getFrame() - 100, Math.cos(anim.getFrame() / 25) * 60);


        if(events.getMousePos() != null) 
        {

        //Here I want to do alert("Works!"); if mouse clicked image.

        }

    });

    image.onload = function()
    {
        anim.start();
    };
    image.src = "mojaRyba.png";

    events.listen();
};

</script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>

@编辑

我添加了更多代码。

最佳答案

您需要添加一个点击事件处理程序,这是一个示例:

canvas.addEventListener("click", function(
    alert("Works!");
)

关于javascript - 如果单击 Canvas 中的图像,则会发出警报,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29126364/

相关文章:

canvas - 在 Firefox 中将 SVG 对象绘制到 Canvas 时,不会应用对 SVG 对象的过滤器

javascript - var i = [0] 在 for 循环中,然后递增 i++ - 为什么它有效?

javascript - 格式化获取请求的路由

javascript - 未捕获的类型错误 : Cannot read property '0' of undefined

python - 高效有效的返回包含图片的mongodb结果

javascript - 背景图片 url 更改时按钮大小更改

Android打开带有特定文件夹链接的默认图库无法加载

javascript - 在 Canvas 上绘制具有 alpha 不透明度的正方形的正确方法是什么?

javascript - 利用 HTML5 中的前景和背景 Canvas

javascript - 我如何使用 angularJS 将可拖动指令应用于 Bootstrap 模式?