Question

当我将鼠标悬停在城市上时，我正试图在我的丹麦地图上设置信息。我尝试绘制一个圆圈，但它不会出现在我的地图上（它出现在，但没有结束），我不确定你是否可以设置事件。这是我第一次使用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>

Answer 1

这是Derek的意思：

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

Answer 2

正如你所说，它似乎没有结束。如果您想要将图像放在顶部，则必须在绘制图像后填充圆圈。想一想这些函数对像素数据的作用（替换像素）。您可以在同一事件中绘制圆圈，为图像加载，只需在drawImage调用后绘制它。

如何在我的drawimage上重叠画布圆并设置坐标事件

2 个答案: