                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

关于绘制圆弧时的路径起点的问题

第一张图，在绘制arc的时候，没有用beginPath和closePath，画出来的圆弧起点与上一个图形的起点相连接；

第二张图beginPath和closePath，画出来的是一个封闭的图形；

第三张图，设置了新的起点，画出了独立的圆弧，但是把上一段线段的颜色给改变了；

第四张图，用了beginPath和closePath，依旧画出了封闭图形。

请问是怎么回事呢？有没有什么办法，在不改变上一个路径的颜色的同时，画出一段独立的圆弧呢？

cesiya23

2015-11-02

源自：炫丽的倒计时效果Canvas绘图与动画基础 2-3

关注问题我要回答

1040

操作

收起

1 回答

宇宙无敌626
2015-12-13

beginPath决定是不是新的一段路径，closePath决定路径是不是封闭，让线条和圆弧独立，就分别设置beginPath;让线条结束设置closePath,圆弧不封闭就不设置closePath;

context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.closePath();
 
context.lineWidth = 2;
context.strokeStyle = "green";
context.stroke();
 
context.beginPath();
context.arc(400,400,100,0,1.5*Math.PI,false);
context.strokeStyle = "red";
context.stroke();