如何让canvas/svg在图像上循环？

Question

我在图像上绘制圆圈时遇到了一些问题，我希望我能做一些类似这张图片的事情。 （来自http://www.kinhub.org/kinmap/index.html）

draw circle on image

我正在尝试这样做，但像此代码一样失败，圆圈无法覆盖图像，我不知道如何处理此问题，请帮助我或给我一些关键字进行搜索。

var img = document.getElementById("Kinome_tree");
var c = document.getElementById("circle");
c.style.position = "absolute";
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();

<img id="Kinome_tree" src="https://media.cellsignal.com/www/images/science/kinases/kinome.jpg" border="0" width="300">
<canvas id="circle"></canvas>

Answer 1

请在您设置左右偏移的位置添加 + "px"

下面是夹具：

var im = document.getElementById("Kinome_tree");
var c = document.getElementById("circle");
c.style.position = "absolute";
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();

<img id="Kinome_tree" src="https://media.cellsignal.com/www/images/science/kinases/kinome.jpg" border="1" width="300">
<canvas id="circle"></canvas>

Answer 2

1. 如前所述，您应该添加px 来偏移顶部和左侧

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

3.arc 的前两个参数是centerX 和centerY.so 给定0 你把圆减半

4. 从您提供的图片来看，您想要fill 圆圈。不是stroke。所以你应该使用fill函数

我建议这样做：

var im = document.getElementById("Kinome_tree");
var c = document.getElementById("circle");
c.style = "position:absolute;left:0;top:0;width:100%;height:100%;display:block";

im.onload = function(){
  c.width = im.offsetWidth;
  c.height = im.offsetHeight;
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(50,50,10,0,2*Math.PI);
  ctx.lineWidth = 3;
  ctx.fillStyle = '#00ff00';
  ctx.fill();
}

#image-container {
  position: relative;
  display: inline-block;
}
#Kinome_tree {
  display: block;
}

<div id="image-container">
<img id="Kinome_tree" src="https://media.cellsignal.com/www/images/science/kinases/kinome.jpg" border="1" width="300">
<canvas id="circle"></canvas>
</div>