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

2023-06-19前端开发问题

本文介绍了JavaScript HTML5-Canvas - 使用 SetInterval 绘制弧会导致锯齿状边缘的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！

问题描述

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

I'm trying to draw a donut chart, and so far I've been successful. The problem is that when trying to animate the arc by combining stroke() with setInterval(), it works, but it does not look smooth, and produces jagged edges. I tried using clearRect() to clear the canvas after the animation was done and re-add the final version of the animation, but I must have been using clearRect() wrong, because it did nothing. If you have any ideas on how to get this looking good, I'd really appreciate it.

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

You can see my current code on jsfiddle: http://jsfiddle.net/4mJCy/ and below:

主体:

<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();

推荐答案

锯齿是由于反复覆盖你的弧造成的.

The jaggies are caused by repeatedly over-writing your arcs.

相反，重构您的代码以在每个动画循环中清除画布.

Instead, refactor your code to clear the canvas with each animation loop.

一个演示: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>

这篇关于JavaScript HTML5-Canvas - 使用 SetInterval 绘制弧会导致锯齿状边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

Rails/Javascript:如何将 rails 变量注入(非常)简单的 javascript

CoffeeScript 总是以匿名函数返回

热门文章

热门精品源码

最新VIP资源