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

【问题标题】：How to draw circles in HTML5 canvas with text in them如何在 HTML5 画布中绘制带有文本的圆圈
【发布时间】：2013-01-10 11:32:57
【问题描述】：

看起来很简单，可以在 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);
        }
    });

【问题讨论】：

标签： javascript jquery html canvas html5-canvas

【解决方案1】：

只需在函数开头附近添加：

ctx.beginPath();

你一直在画一条更长的路。

Stack Snippets 和JS Fiddle 中的演示（点击画布）

var canvas = document.getElementById('circles_canvas');
canvas.addEventListener("click", function(event) {
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    var w = 16;
    var x = Math.floor(event.pageX-this.offsetLeft);
    var y = Math.floor(event.pageY-this.offsetTop);
    
    ctx.beginPath();
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.arc(x, y, w/2, 0, 2 * Math.PI, false);
    ctx.fill();

    ctx.font = '8pt Calibri';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.fillText('0', x, y+3);
  }
})

canvas {
  border: 1px solid black;
}

<h1>Click Canvas Below</h1>
<canvas id="circles_canvas"></canvas>

【讨论】：