JavaScript HTML5画布-使用SetInterval绘制圆弧会导致锯齿状边缘
我正试图画一个油炸圈饼图,到目前为止我已经成功了。问题在于,当尝试通过将JavaScript HTML5画布-使用SetInterval绘制圆弧会导致锯齿状边缘,javascript,canvas,html5-canvas,setinterval,animated,Javascript,Canvas,Html5 Canvas,Setinterval,Animated,我正试图画一个油炸圈饼图,到目前为止我已经成功了。问题在于,当尝试通过将stroke()与setInterval()组合来设置圆弧动画时,它可以工作,但看起来并不平滑,并产生锯齿状边缘。我尝试在动画完成后使用clearRect()清除画布,并重新添加动画的最终版本,但我一定使用了clearRect()错误,因为它没有做任何操作。如果你对如何让这个看起来好看有什么想法,我会非常感激 您可以在jsfiddle:和下面看到我当前的代码: 正文: 锯齿是由反复过度书写圆弧造成的 相反,重构代码以清除每个
stroke()
与setInterval()
组合来设置圆弧动画时,它可以工作,但看起来并不平滑,并产生锯齿状边缘。我尝试在动画完成后使用clearRect()
清除画布,并重新添加动画的最终版本,但我一定使用了clearRect()
错误,因为它没有做任何操作。如果你对如何让这个看起来好看有什么想法,我会非常感激
您可以在jsfiddle:和下面看到我当前的代码:
正文:
锯齿是由反复过度书写圆弧造成的 相反,重构代码以清除每个动画循环的画布 演示: 大概是这样的:
<!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>
正文{背景色:白色;}
画布{边框:1px纯红;}
$(函数(){
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
var currentEndAngle=1.5;
var currentStartAngle=1.5;
var pie1=设定间隔(图15);
var计数器=0;
函数绘图(){
如果(计数器>=101){
}否则{
var startAngle=currentStartAngle*Math.PI;
var endAngle=(currentEndAngle)*Math.PI;
currentEndAngle=currentEndAngle+0.01;
var逆时针=假;
clearRect(0,0,canvas.width,canvas.height);
//红色的
画圈(75“#FF0000”);
//灰色的
drawDonut(startAngle、endAngle);
}
计数器++;
}
//
函数drawDonut(startAngle、endAngle){
ctx.beginPath();
ctx.弧(107107,75,星形,端角);
ctx.lineWidth=50;
ctx.strokeStyle=“#444”;
ctx.stroke();
}
//
函数drawCircle(半径、颜色){
ctx.beginPath();
ctx.弧(107107,半径,0,2*Math.PI);
ctx.lineWidth=50;
ctx.strokeStyle=颜色;
ctx.stroke();
}
}); // end$(函数(){});
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();
<!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>