html5最强大标签canvas (二)

圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

x:圆心的x坐标

y:圆心的y坐标

straAngle:开始角度

endAngle:结束角度

anticlockwise:是否逆时针(true)为逆时针,(false)为顺时针

ps:经过试验证明书本上ture是顺时针,false是逆时针是错误的,而且无论是逆时针还是顺时针,角度都沿着顺时针扩大,如下图:

代码如下:


function draw0(id) {
            var canvas = document.getElementById(id);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext('2d');
            context.beginPath();
            context.arc(200, 150, 100, 0, Math.PI * 2, true);
            //不关闭路径路径会一直保留下去,当然也可以利用这个特点做出意想不到的效果
            context.closePath();
            context.fillStyle = 'rgba(0,255,0,0.25)';
            context.fill();
        }

ps: 一不小心画了小日本的国旗...赶紧调下颜色和大小,绿色倒是挺合适的~

路径  context.beginPath()    context.closePath()

细心的朋友会发现上面的画圆并不单单是直接用arc还用到了context的 beginPath   和closePath方法,参考书不愧是参考书,例子给得太简单了,实话说一开始我凌乱了,耐心下来做了几个实验才舒缓蛋疼的心情

实验代码如下,通过分别注释closePath 和beginPath看fill stoke 和fill stroke结合下画出来的两个1/4弧线达到实验效果

代码如下:


function draw23(id) {
            var canvas = document.getElementById(id);
            if (canvas == null) {
                return false;
            }
            var context = canvas.getContext('2d');
            var n = 0;
            //左侧1/4圆弧
            context.beginPath();
            context.arc(100, 150, 50, 0, Math.PI/2 , false);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            context.fill();
            context.strokeStyle = 'rgba(255,0,0,0.25)'
            context.closePath();
            context.stroke();
            //右侧1/4圆弧
            context.beginPath();
            context.arc(300, 150, 50, 0, Math.PI/2 , false);
            context.fillStyle = 'rgba(255,0,0,0.25)';
            context.fill();
            context.strokeStyle = 'rgba(255,0,0,0.25)';
            context.closePath();
            context.stroke();
        }

效果如下:

得出的结论有:

1、系统默认在绘制第一个路径的开始点为beginPath

2、如果画完前面的路径没有重新指定beginPath,那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

3、每次调用context.fill()的时候会自动把当次绘制的路径的开始点和结束点相连,接着填充封闭的部分

ps:如果没有重新beginPath那么前面的路劲会保留, 如果你这块还是没看懂,那么记住每次画路径都在前后加context.beginPath()   和context.closePath()就行

相关文章

火龙果开发官方微信
更多干货!欢迎扫描上方二维码关注官方微信公众号(火龙果开发)
发表新评论