Question

我想通过点击鼠标按钮来绘制圆圈。为什么不画出第二个圆圈？我有Chrome 39.0.2171.99米。在最新版本的Firefox上，我也查了一下。

var mx = document.getElementById("mx");
var my = document.getElementById("my");
var can = document.getElementById("mainCanvas");
var canLeft = can.offsetLeft, canTop = can.offsetTop;
var g = can.getContext('2d');

// Draw circle with text
function drawCircleWithText(g, x, y, r, text, bgclr, textclr) {
	g.fillStyle = bgclr || "black";
	g.beginPath();
	g.arc(x, y, r, 0, Math.PI * 2);
	g.closePath();
	g.fill();
	g.fillStyle = textclr || "white";
	g.font = "bold "+r+"px serif";
	var w = g.measureText(text).width,
		h = g.measureText("w").width;
	g.fillText(text, x - w/2, y + h/2);
	//console.log("End DCWT: ",x,y,r,text);
}

var r = 20, n = 0;

// Add event listener for `click` events.
can.addEventListener('click', function(event) {
    var x = event.pageX - canLeft,
        y = event.pageY - canTop;

    drawCircleWithText(g, x, y, r, ""+(++n));

}, false);

can.onmousemove = function(e) {
    mx.innerHTML =  e.x;
    my.innerHTML = e.y;
}

<span id="mx">0</span>, <span id="my">0</span><br>
<canvas id="mainCanvas" width="300" 
height="400" style="border: 1px solid black"></canvas>

对不起。计算机的问题。

Answer 1

根据我对您的问题的理解，这对我来说很好。可能是你的问题我不清楚，或者你可能是在body标签内的脚本标签后写的canvas标签。

为什么不画出第二个圆圈？

1 个答案: