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

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

javascript html

在html5和javascript中的图像上画一个圆圈,javascript,html,Javascript,Html,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(); imag

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>


函数start（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
ctx.drawImage（图像，69,50）；
//画圈
ctx.beginPath（）；
ctx.arc（100,75,10,0，Math.PI*2，真）；
ctx.stroke（）；
};
image.src='xy coordinates.jpg'；
}

我试图在单击按钮后在图像上动态绘制一个圆

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

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

更新

<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>


函数绘图（）{
var img=document.getElementById（“theImg”）；
var cnvs=document.getElementById（“myCanvas”）；
cnvs.style.position=“绝对”；
cnvs.style.left=img.offsetLeft+“px”；
cnvs.style.top=img.offsetTop+“px”；
var ctx=cnvs.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（250210,10,0,2*Math.PI，false）；
ctx.lineWidth=3；
ctx.stroke（）；
}

当在画布前后的html标记中使用
时，图像和按钮之间有一个巨大的距离，我在其中放置的任何标记。如何校正？

您正在画布上绘制一幅图像，第二幅图像带有“img”标记（已显示）。您不能在HTML标记上用画布绘制圆圈。

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

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();

更新：

函数绘图（）{
var img=document.getElementById（“theImg”）；
var cnvs=document.getElementById（“myCanvas”）；
cnvs.style.position=“绝对”；
cnvs.style.left=img.offsetLeft+“px”；
cnvs.style.top=img.offsetTop+“px”；
var ctx=cnvs.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（250210200,0,2*Math.PI，false）；
ctx.lineWidth=3；
ctx.strokeStyle='#00ff00'；
ctx.stroke（）；
}

#绘制btn{
字体大小：14px；
填充：2x16px 3x16px；
边缘底部：8px；
}

是否有任何可能动态执行此操作？不，您可以使用css移动元素（但这不是一个好方法），但不能在html标记上绘制画布元素。你应该在画布上画两个（更好的方式）我不明白你的意思。都在画布上？我的意思是，如果你想在图像上画圆圈，你应该用画布（而不是HTML标签）同时画（图像和圆圈）。这不起作用：（图像被完全隐藏。当我单击按钮时，按钮被移动到顶部，图像没有显示。当然它起作用了！请参阅我的答案更新中的示例。很好：）顺便说一句，我刚刚发布了文章“用HTML5画布控制图像”。第一部分已经准备好，下一部分将在最近的几天内到来。欢迎阅读：对不起，再次打扰你。但是现在的问题是，当我在画布之前或之后使用html标记时，我在两个html标记之间获得了一个巨大的空间。在上面的代码中，图像和按钮之间有一个巨大的空间。如何矫正？好的，让我们让它更优雅一点。请参阅更新的：）