Question

我想通过在点周围画一个圆来绘制图像上的x和y坐标。我从服务器获取图像作为数组缓冲区。显示图像后，我需要使用从服务发送的json作为标记来标记图像中的角。我怎么能用javascript jquery做到这一点？我想通过用帆布层覆盖图像来做同样的事情。我该如何实现呢？

我尝试过以下方法，但是这些点被绘制在图像之外

\r\n

Answer 1

你当然可以使用画布来完成。执行以下步骤 - ＆gt;

在画布上绘制图像，如图像大小=画布大小。
现在，在上一个画布上完全覆盖另一个z-index较高的画布（默认情况下画布是透明的）。
现在使用json提取的点的坐标，通过在这个叠加的画布上绘制它们来标记图像中的角。
然后，您可以使用简单的上下文函数在上部画布上围绕这些点绘制圆圈。

由于画布尺寸与图像尺寸相同，这些坐标将完全重合，您可以实现想要的:)。总之，您可以在上部画布上绘制圆圈和标记，只需在下部画布上绘制图像。很简单？？：）

注意：画布和图像本身的尺寸应该完全一致。

看一下这个例子https://jsfiddle.net/rbrv949d/

<canvas id="c"  style="z-index: 1;"></canvas>
<canvas id="cover" style="z-index: 2;"></canvas>

JS onload

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var canover=document.getElementById('cover');

var ctxover = canvas.getContext('2d');

// Create an image element
var img = new Image();

// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
    ctxover.fillRect(0,0,10,10);
     ctxover.fillRect(0,20,10,10);
}

// Specify the src to load the image
img.src = "http://www.experts-exchange.com/images/experts-exchange/experts-exchange-logo.png";

canvas.width=img.width;
canvas.height=img.height;


canover.width=img.width;
canover.height=img.height;

这里，ctxover.fillRect（xposition，yposition，widthinpixels，heightinpixels）在您的情况下，xposition和yposition是从json获取的。你也可以在同一个画布上绘制这些标记，而不使用重叠的画布。它取决于你。如果你清除这个画布，那么这些标记也会被清除，与其他情况不同：）

使用javascript在图像上绘制x和y坐标

1 个答案: