在html5和javascript中的圖像上畫一個圓圈

Question

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標簽中或在畫布之后使用<br>時，圖像和按鈕r之間會有很大的距離。 怎么糾正呢？

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

Answer 2

您正在畫布上繪制一個圖像，並使用“img”標記（已顯示）繪制第二個圖像。 你不能在HTML標簽上繪制帶有畫布的圓圈。

在html5和javascript中的圖像上畫一個圓圈

問題描述

2 個解決方案

解決方案1
11 已采納 2015-02-11 16:25:31

解決方案2
0 2015-02-11 16:11:13

在html5和javascript中的圖像上畫一個圓圈

問題描述

2 個解決方案

解決方案1 11 已采納 2015-02-11 16:25:31

解決方案2 0 2015-02-11 16:11:13

解決方案1
11 已采納 2015-02-11 16:25:31

解決方案2
0 2015-02-11 16:11:13