HTML5 Canvas笔划没有消除锯齿 [英] HTML5 Canvas stroke not anti-aliased

问题描述

我只想在画布上制作一个带有厚抗锯齿笔画的圆圈。

I'm just trying to make a circle with a thick anti-aliased stroke in canvas.

圆圈按预期绘制，但笔画的边缘非常唠叨。我一直在阅读Chrome强制抗锯齿，所以不知道该怎么办...

The circle gets drawn as expected, but the edges of the stroke are very jaggy. I keep reading that Chrome forces anti-aliasing, so not sure what to do...

小提琴：http://jsfiddle.net/nipponese/hWsxw/

HTML

<div id="main">
    <canvas id="myCanvas" width="400" height="400" style="border: 1px solid #000"></canvas>
        <div id="counter" style="height: 100px; width: 100px; border: 1px solid #000">
     </div>
</div>

JS + jQuery

<script>
    function calc(myVal) {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        var radius = 70;

        ctx.beginPath();
        ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
        ctx.lineWidth = 14;
        ctx.stroke();
    };
    $(document).ready(function() {
        var count = 0;
        var parsedCount;
        function go(){  
            if (count <= 200) {
                parsedCount = count*.01
                $('#counter').html('<p>' + parsedCount + '</p>');
                calc(parsedCount);
                count++;
            }
        }
        setInterval(go, 10)
    });
</script>

推荐答案

我的同事刚刚指出我需要每次绘制后使用clearRect清除画布。笔画只是在彼此之上绘制。

My co-worker just pointed out that I need to use clearRect to clear the canvas after each draw. The strokes were just being drawn on top of each other.

function calc(myVal) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var radius = 70;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    ctx.arc(140, 140, 20, myVal * Math.PI, 0, true);
    ctx.lineWidth = 14;
    ctx.stroke();
};

这篇关于HTML5 Canvas笔划没有消除锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！