在 html5 和 javascript 中的图像上画一个圆圈答案

【问题标题】：draw a circle over a image in html5 and javascript在 html5 和 javascript 中的图像上画一个圆圈
【发布时间】：2015-02-11 16:00:46
【问题描述】：

html代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function start() {
    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(100, 75, 10, 0, Math.PI * 2, true);
        ctx.stroke();
     };

    image.src = 'xy-coordinates.jpg';                 
  }
</script>
</head>
<img id="myImgId" alt="" src="xy-coordinates.jpg" />
<input type="button" value="submit" onclick="start()"> 
<canvas id="myCanvas" width="700" height="393"></canvas>
</body>
</html>

单击按钮后，我正在尝试在图像上动态绘制一个圆圈。

问题是单击按钮后，我在屏幕上显示了一个额外的图像（绘制了圆圈），而不是在原始图像上绘制。

我的要求是在已经显示的图像上画一个圆圈。

更新

<script>

function Draw(){
var img = document.getElementById("theImg");
var cnvs = document.getElementById("myCanvas");

cnvs.style.position = "absolute";
cnvs.style.left = img.offsetLeft + "px";
cnvs.style.top = img.offsetTop + "px";

var ctx = cnvs.getContext("2d");
ctx.beginPath();
ctx.arc(250, 210, 10, 0, 2 * Math.PI, false);
ctx.lineWidth = 3;
ctx.stroke();
}


</script>

<img id='theImg' src='xy-coordinates.jpg'>
<input type='button' value='Draw' onclick='draw()' ><br>
<canvas id='myCanvas' width="700" height="393"></canvas>

当
用于 html 标记之前或之后画布时，图像和按钮 r 之间的距离很大，我放置在其中的任何标记。怎么整？

【问题讨论】：

标签： javascript html

【解决方案1】：

您不需要再创建一张图片，因为实际上画布本身就是一张图片。通过将其位置设置为与源图像相同的绝对、左侧和顶部，将您的画布放在源图像的顶部：

var img = document.getElementById("myImgId");
var c = document.getElementById("myCanvas");
c.style.position = "absolute";
c.style.left = img.offsetLeft;
c.style.top = img.offsetTop;

然后画到画布上：

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 10, 0, Math.PI * 2, true);
ctx.stroke();

更新：

function Draw(){
  var img = document.getElementById("theImg");
  var cnvs = document.getElementById("myCanvas");
  
  cnvs.style.position = "absolute";
  cnvs.style.left = img.offsetLeft + "px";
  cnvs.style.top = img.offsetTop + "px";
  
  var ctx = cnvs.getContext("2d");
  ctx.beginPath();
  ctx.arc(250, 210, 200, 0, 2 * Math.PI, false);
  ctx.lineWidth = 3;
  ctx.strokeStyle = '#00ff00';
  ctx.stroke();
}

#draw-btn {
  font-size: 14px;
  padding: 2px 16px 3px 16px;
  margin-bottom: 8px;
}

<div>
  <input id='draw-btn' type='button' value='Draw' onclick='Draw()' />
</div>
<img id='theImg' src='http://i.telegraph.co.uk/multimedia/archive/02351/cross-eyed-cat_2351472k.jpg'>
<canvas id='myCanvas' width='536px' height='536px'></canvas>

【讨论】：

没有。那不起作用:(图像完全隐藏。当我单击按钮时，按钮被移到顶部并且图像不显示。
当然可以！请参阅我的答案更新中的示例。
很好 :) 顺便说一句，我刚刚发布了文章“使用 HTML5 画布掌握图像”。第一部分已准备好，下一部分将在最近的日子里进行。欢迎阅读：web-plus-plus.com/Articles/mastering-images-html5-canvas-1
抱歉又给你添麻烦了。但是现在问题出在 html 标签中，当我在画布之前或之后有
时，我在两个 html 标签之间获得了巨大的空间。在上面的代码中，图像和按钮之间有很大的空间。如何纠正？
好的，让它更优雅一点。查看更新的:)

【解决方案2】：

您正在画布上绘制一张图片，第二张图片带有“img”标签（已显示）。你不能在 HTML 标签上用画布画圆。

【讨论】：

有没有可能动态地做到这一点？
不，你可以用 css 移动
我没有得到你。都在画布上？
我的意思是，如果你想在 image 上画圆圈，你应该用画布（而不是 HTML 标签）来画（图像和圆圈）。