Javascript 如何在drawimage上重叠画布圆圈，并设置cordinate和event_Javascript_Html_Canvas_Html5 Canvas

Javascript 如何在drawimage上重叠画布圆圈，并设置cordinate和event

javascript html canvas html5-canvas

Javascript 如何在drawimage上重叠画布圆圈，并设置cordinate和event,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,当我把鼠标移到一个城市上时，我正试图在我的丹麦地图上设置信息。我试着画一个圆圈，但它不会出现在我的地图上（它出现在下方，而不是上方），我也不确定你们是否可以设置这个事件。这是我第一次使用画布 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

当我把鼠标移到一个城市上时，我正试图在我的丹麦地图上设置信息。我试着画一个圆圈，但它不会出现在我的地图上（它出现在下方，而不是上方），我也不确定你们是否可以设置这个事件。这是我第一次使用画布

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


函数startCanvas（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//画圈
ctx.beginPath（）；
ctx.arc（75,75,10,0，Math.PI*2，真）；
ctx.closePath（）；
ctx.fill（）；
var image=新图像（）；
image.onload=函数（）{
ctx.drawImage（图像，69,50）；
};
image.src='dankman.jpg'；
}
正如你所说，它出现在“未结束”下。如果你想把它放在上面，你必须在画完图像后填充这个圆。想想这些函数对像素数据做了什么（替换像素）。您可以在同一事件内绘制圆，只需在drawImage调用后绘制图像即可。Derek的意思如下：


函数startCanvas（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
ctx.drawImage（图像，69,50）；
//画圈
ctx.beginPath（）；
ctx.arc（75,75,10,0，Math.PI*2，真）；
ctx.closePath（）；
ctx.fill（）；
};
image.src='dankman.jpg'；
}
<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>