在 html5 和 javascript 中的图像上画一个圆圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28458818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
draw a circle over a image in html5 and javascript
提问by kishore
html code :
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>
I'm trying to draw a circle on an image dynamically once I click the button.
单击按钮后，我试图在图像上动态绘制一个圆圈。
The problem is after clicking the button, I'm getting an extra image (with the circle drawn) displayed on the screen rather drawing on original image.
问题是单击按钮后，我在屏幕上显示了一个额外的图像（绘制了圆圈），而不是在原始图像上绘制。
My requirement is to draw a circle on an image which is already displayed.
我的要求是在已经显示的图像上画一个圆圈。
UPDATED
更新
<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>
when < br > is used in html tag befor or after canvas there comes a huge distance betweein image and button r any tags i place in there. how to rectify it ?
当 <br> 在画布之前或之后的 html 标签中使用时，图像和按钮之间的距离很大，我放置在那里的任何标签。如何纠正？
回答by Alexander Dayan
You don't need to create one more image because canvas in fact is an image by itself. Place your canvas on top of the source image by setting its position to absolute, left and top same as the source image:
您不需要再创建一个图像，因为画布实际上本身就是一个图像。通过将画布的位置设置为与源图像相同的绝对、左侧和顶部，将您的画布放在源图像的顶部：
var img = document.getElementById("myImgId");
var c = document.getElementById("myCanvas");
c.style.position = "absolute";
c.style.left = img.offsetLeft;
c.style.top = img.offsetTop;
Then just draw into canvas:
然后只需绘制到画布中：
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 10, 0, Math.PI * 2, true);
ctx.stroke();
UPDATE:
更新：
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>回答by Narek Hayrapetyan
You are drawing one image on canvas, and second image with "img" tag (already displayed). you can't draw circle with canvas, on HTML tag.
您正在画布上绘制一张图像，第二张带有“img”标签的图像（已显示）。你不能在 HTML 标签上用画布画圆。
