Javascript 如何让画布/svg在图像上循环？

我有一些关于在图片上画圆圈的问题，我希望我能做一些像这张图片一样的事情。 （来自）

我正试图这样做，但失败像这个代码，圈不能覆盖在图像上，我不知道如何处理这个问题，请帮助我或给我一些关键字搜索

var img=document.getElementById（“Kinome_树”）；
var c=document.getElementById（“圆”）；
c、 style.position=“绝对”；
c、 style.left=img.offsetLeft；
c、 style.top=img.offsetTop；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（0,50,10,0,2*Math.PI）；
ctx.lineWidth=3；
ctx.strokeStyle='#00ff00'；
ctx.stroke（）

请在设置左右偏移的位置添加+“px”

以下是固定装置：


var im=document.getElementById（“Kinome_树”）；
var c=document.getElementById（“圆”）；
c、 style.position=“绝对”；
c、 style.left=im.offsetLeft+“px”；
c、 style.top=im.offsetTop+“px”；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（0,50,10,0,2*Math.PI）；
ctx.lineWidth=3；
ctx.strokeStyle='#00ff00'；
ctx.stroke（）

1。如前所述，您应该将
px
添加到顶部和左侧偏移

2.我看不出有任何理由移动画布-让画布覆盖整个图像，并在指定的位置/大小绘制圆圈

3.弧的前两个参数是
centerX
和
centerY
。因此，通过给定
0
将圆切割一半

4.从您提供的图像来看，它看起来像是要填充圆圈。非
笔划
。所以你应该使用
fill
函数

我建议您这样做：


var im=document.getElementById（“Kinome_树”）；
var c=document.getElementById（“圆”）；
c、 style=“位置：绝对；左侧：0；顶部：0；宽度：100%；高度：100%；显示：块”；
im.onload=函数（）{
c、 宽度=im.offsetWidth；
c、 高度=im离视线；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（50,50,10,0,2*Math.PI）；
ctx.lineWidth=3；
ctx.fillStyle='#00ff00'；
ctx.fill（）；
}
#图像容器{
位置：相对位置；
显示：内联块；
}
#基诺梅树{
显示：块；
}

感谢您的帮助，它可以工作：）但是当我在我的网站上使用它时出现了一些问题，我发现当我添加导航栏时，圆圈无法显示。。。完全是子菜单导航栏。我不知道如何解决这个问题，请再帮我一次。我通过注释标记问题代码
，当我在那里注释时，它就是工作。非常感谢：）我需要看看代码。。一定是什么东西不见了！！谢谢你的帮助，它可以工作：）但是当我在我的网站上使用它时有一些问题，我发现当我添加导航栏时圆圈无法显示。。。完全是子菜单导航栏。我不知道如何解决这个问题，请再帮我一次。我通过注释标记问题代码
，当我在那里注释时，它就是工作。非常感谢：）我认为图像已缓存，并且未调用
onload
。我做了一些改变。请查看链接谢谢您的帮助，但我想知道为什么要使用
ctx.closePath（）