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

时间:2013-01-26 17:59:06

标签: javascript jquery html5 canvas html5-canvas

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

1 个答案:

答案 0 :(得分:10)

只需在功能开头附近添加:

        ctx.beginPath();

你画的路径总是更长。

Demonstration(点击画布)