0

当我将鼠标悬停在一个城市上时，我正试图在我的丹麦地图上设置信息。我尝试画一个圆圈，但它不会出现在我的地图上（它出现在下方，而不是上方），我不确定您是否可以为其设置事件。这是我第一次使用画布。

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

2 回答 2

2

这是德里克的意思： 

<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>
于 2013-02-14T05:33:58.687 回答
0

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

于 2013-02-14T03:56:48.523 回答