在safari中重新绘制时，画布形状会变得混叠

Question

我正在使用画布绘制一个简单的进度指示器。当元素第一次被绘制时，它看起来很漂亮并且消除锯齿，但是当第二次绘制时，它会失去它的抗锯齿。有人知道这里会发生什么吗？

function drawProgress(id, percent) {
            var selected = $(safeID(id)).is('.selected');

            var canvas = $(safeID("CANVAS_" + id));
            var ctx = $(canvas)[0].getContext('2d');
            ctx.clearRect();

            if ( selected ) {
                ctx.fillStyle = "#ffffff";
                ctx.strokeStyle = "#ffffff";
            }
            else {
                ctx.fillStyle = "#99a7ca";
                ctx.strokeStyle = "#99a7ca";
            }

            ctx.beginPath();
            ctx.arc(canvas.width()/2.0, canvas.height()/2.0, canvas.width()/2.0-1, 0, Math.PI, false);
            ctx.fill();

            ctx.beginPath();
            ctx.arc(canvas.width()/2.0, canvas.height()/2.0, canvas.width()/2.0-1, 0, Math.PI*2.0, false);
            ctx.stroke();
        }

Answer 1

您需要指定尺寸为clearRect。