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

时间:2015-06-23 09:32:08

标签: javascript jquery html5 canvas

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

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

\r\n

1 个答案:

答案 0 :(得分:0)

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

  1. 在画布上绘制图像,如图像大小=画布大小。
  2. 现在,在上一个画布上完全覆盖另一个z-index较高的画布(默认情况下画布是透明的)。
  3. 现在使用json提取的点的坐标,通过在这个叠加的画布上绘制它们来标记图像中的角。
  4. 然后,您可以使用简单的上下文函数在上部画布上围绕这些点绘制圆圈。
  5. 由于画布尺寸与图像尺寸相同,这些坐标将完全重合,您可以实现想要的:)。总之,您可以在上部画布上绘制圆圈和标记,只需在下部画布上绘制图像。很简单? ?:)

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

    看一下这个例子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获取的。 你也可以在同一个画布上绘制这些标记,而不使用重叠的画布。它取决于你。如果你清除这个画布,那么这些标记也会被清除,与其他情况不同:)