javascript - Canvas 动态绘制圆有锯齿
本文介绍了javascript - Canvas 动态绘制圆有锯齿的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
测试地址:
http://codepen.io/sanonz/pen/ezzaYb?editors=0011
每次绘制的时候都用上次绘制的结束角作为开始角,整体绘制出来衔接处怎么会有缝隙?
解决方案
调用stroke方法描边并将strokeStyle颜色和fillstyle设置成相同的就不会出现缝隙
缝隙的出现可能时因为像素,颜色过渡,斜线总是带锯齿的有关~
function draw(){
var end = easeOut(t, sAngle, eAngle, 100) / 100;
console.log(end);
ctx.beginPath();
ctx.moveTo(width / 2, height / 2);//A
ctx.arc(width / 2, height / 2, width / 2, sAngle, end);//B
ctx.fillStyle = '#00af0b';//C
ctx.strokeStyle = "#00af0b";//D
ctx.fill();
ctx.stroke();
sAngle = end;
if (t < 100) {
t++;
requestAnimationFrame(draw2);
}
}
运行下面的代码我们能发现,垂直位置的那条缝隙是看不到的,其它的非垂直的斜线的地方都是有的
function draw1(){
ctx.save();
ctx.translate(width / 2, height / 2);
ctx.rotate(t*10 * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.arc(0, 0, width / 2, 0, 10* Math.PI / 180);
ctx.fillStyle = '#00af0b';
ctx.fill();
ctx.restore();
console.log(t);
}
(function doDraw(){
draw1();
t++;
if(t<10){
requestAnimationFrame(doDraw);
}
}());
这篇关于javascript - Canvas 动态绘制圆有锯齿的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文