在 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 指定尺寸。