个人中心
gpt4 book ai didi

javascript - 如何在我的绘图图像上重叠 Canvas 圆并设置事件坐标

转载 作者：行者123 更新时间：2023-12-02 19:00:09 25 4
gpt4 key购买 nike

当我将鼠标悬停在城市上时，我尝试在丹麦 map 上设置信息。我尝试画一个圆圈，但它不会显示在我的 map 上(它出现在下面，而不是上面)，我不确定您是否可以为其设置事件。这是我第一次使用 Canvas 。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript">
        function startCanvas() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");

            //draw a circle
            ctx.beginPath();
            ctx.arc(75, 75, 10, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();

            var image = new Image();

            image.onload = function () {
                ctx.drawImage(image, 69, 50);
            };

            image.src = 'denmark.jpg';                 
        }
    </script>
</head>
<body onload="startCanvas()">
    <canvas id="myCanvas" width="600" height="600";">
    Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

最佳答案

德里克的意思是: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript">
    function startCanvas() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");

        var image = new Image();

        image.onload = function () {
            ctx.drawImage(image, 69, 50);
            //draw a circle
            ctx.beginPath();
            ctx.arc(75, 75, 10, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
        };

        image.src = 'denmark.jpg';                 
    }
</script>
</head>
<body onload="startCanvas()">
<canvas id="myCanvas" width="600" height="600";">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

关于javascript - 如何在我的绘图图像上重叠 Canvas 圆并设置事件坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14867229/

25 4 0
文章推荐： javascript - 从多个数组中返回第二个值 Javascript
文章推荐： python - 如何在 Django 中创建特定时间后删除记录？
文章推荐： javascript - setTimeout 函数，以 Promise 解析值作为回调
文章推荐： javascript - mongodb 在嵌套容器中找不到我的模式方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com