JavaScript HTML5-Canvas - 使用 SetInterval 绘制弧会导致锯齿状边缘

JavaScript HTML5-Canvas - Drawing an Arc with SetInterval Causes Jagged Edges

本文关键字：锯齿状 边缘 绘制 HTML5-Canvas 使用 SetInterval JavaScript      更新时间：2023-09-26

>我正在尝试绘制圆环图，到目前为止我已经成功了。 问题是，当尝试通过将stroke()与setInterval()相结合来对弧线进行动画处理时，它可以工作，但看起来不平滑，并产生锯齿状边缘。 我尝试在动画完成后使用 clearRect() 清除画布并重新添加动画的最终版本，但我一定是用错clearRect()，因为它什么也没做。 如果您对如何使其看起来不错有任何想法，我将不胜感激。

你可以在jsfiddle上看到我当前的代码：http://jsfiddle.net/4mJCy/及以下：

身体：

<canvas id="Donutchart" width="215" height="500" style="border:1px solid #000;">
Your browser does not support the HTML5 canvas tag.  Please Upgrade to the latest version of Chrome, Firefox, or Safari.</canvas>

JavaScript：

var canvas=document.getElementById("Donutchart");
var maincircle=canvas.getContext("2d");
maincircle.beginPath();
maincircle.arc(107,107,100,0,2*Math.PI);
maincircle.fillStyle="#FF0000";
maincircle.fill();

var currentEndAngle = 1.5;
var currentStartAngle = 1.5;
var pie1 = setInterval(draw, 15);
var counter = 0;
function draw(){

    if(counter >= 101){

    } else {
        var startAngle = currentStartAngle * Math.PI;
        var endAngle = (currentEndAngle) * Math.PI;
        currentEndAngle = currentEndAngle + 0.01;
        var counterClockwise = false;

        var donutslice1=canvas.getContext("2d");    
        donutslice1.beginPath();
        donutslice1.arc(107,107,75,startAngle,endAngle);
        donutslice1.lineWidth = 50;
        donutslice1.strokeStyle="#222";
        donutslice1.stroke();
    }

    counter++;
}

var innercircle=canvas.getContext("2d");
innercircle.beginPath();
innercircle.arc(107,107,50,0,2*Math.PI);
innercircle.fillStyle="#FFF";
innercircle.fill();

锯齿是由反复覆盖您的弧线引起的。

相反，重构代码以清除每个动画循环的画布。

演示：http://jsfiddle.net/m1erickson/xNLEQ/

像这样：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: white; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var currentEndAngle = 1.5;
    var currentStartAngle = 1.5;
    var pie1 = setInterval(draw, 15);
    var counter = 0;
    function draw(){
      if(counter >= 101){
      } else {
        var startAngle = currentStartAngle * Math.PI;
        var endAngle = (currentEndAngle) * Math.PI;
        currentEndAngle = currentEndAngle + 0.01;
        var counterClockwise = false;
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // red
        drawCircle(75,"#FF0000");
        // gray
        drawDonut(startAngle,endAngle);
      }
      counter++;
    }
    //
    function drawDonut(startAngle,endAngle){
        ctx.beginPath();
        ctx.arc(107,107,75,startAngle,endAngle);
        ctx.lineWidth = 50;
        ctx.strokeStyle="#444";
        ctx.stroke();
    }
    //
    function drawCircle(radius,color){
        ctx.beginPath();
        ctx.arc(107,107,radius,0,2*Math.PI);
        ctx.lineWidth = 50;
        ctx.strokeStyle=color;
        ctx.stroke();
    }
}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
相关文章：