                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ)

關(guān)于繪制圓弧時的路徑起點的問題

第一張圖，在繪制arc的時候，沒有用beginPath和closePath，畫出來的圓弧起點與上一個圖形的起點相連接；

第二張圖beginPath和closePath，畫出來的是一個封閉的圖形；

第三張圖，設(shè)置了新的起點，畫出了獨立的圓弧，但是把上一段線段的顏色給改變了；

第四張圖，用了beginPath和closePath，依舊畫出了封閉圖形。

請問是怎么回事呢？有沒有什么辦法，在不改變上一個路徑的顏色的同時，畫出一段獨立的圓弧呢？

cesiya23

2015-11-02

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎(chǔ) 2-3

關(guān)注問題我要回答

1060

操作

收起

1 回答

宇宙無敵626
2015-12-13

beginPath決定是不是新的一段路徑，closePath決定路徑是不是封閉，讓線條和圓弧獨立，就分別設(shè)置beginPath;讓線條結(jié)束設(shè)置closePath,圓弧不封閉就不設(shè)置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();