html5圆圈,javascript – 如何在HTML5画布中绘制带有文本的圆圈

看起来很简单,可以在

HTML5画布中绘制圆圈和文本,但是我得到了非直观的行为.圆形画得漂亮漂亮,然后画出的圆圈越多,旧圆圈的形状越来越八角形.对我来说很奇怪…此外,文字从旧圆圈中消失,只出现在最后绘制的圆圈上.用画布做这件事的正确方法是什么？

$("#circles_container").on("click", "#circles_canvas", function(event) {

var canvas = document.getElementById('circles_canvas');

if (canvas.getContext) {

var ctx = canvas.getContext("2d");

var w = 16;

var x = event.pageX;

var y = Math.floor(event.pageY-$(this).offset().top);

ctx.fillStyle = "rgb(200,0,0)";

ctx.arc(x, y, w/2, 0, 2 * Math.PI, false);

ctx.fill();

ctx = canvas.getContext("2d");

ctx.font = '8pt Calibri';

ctx.fillStyle = 'white';

ctx.textAlign = 'center';

ctx.fillText('0', x, y+3);

}

});