canvas使用注意點
阿新 • • 發佈:2019-01-23
1、canvas.arc();方法畫圓時,最後一個引數預設為false,false為順時針,當為true時,為順時針
如果想畫一個1/4圓,需要結合lineTo()方法
2、canvas.createPattern(image,repeatStyle);點陣圖填充
第二個引數可為repeat、repeat-x、repeat-y、no-repeat,預設為repeat。雖然有預設值,但是第二個引數不可預設,否則會報錯。
3、使用canvas.clip()可以對點陣圖(就是圖片,包括drawImage()、createPattern()匯入的圖片)實現裁剪功能。clip()方法無論放在點陣圖顯示程式碼的上面還是下面,都可以對點陣圖進行裁剪。
注意:使用canvas.save();和canvas.restore();方法,可以略去clip()的設定
如果想畫一個1/4圓,需要結合lineTo()方法
canvas.beginPath();
canvas.arc(100,100,50,0,Math/2);
canvas.lineTo(100,100);
canvas.closePath();
2、canvas.createPattern(image,repeatStyle);點陣圖填充
第二個引數可為repeat、repeat-x、repeat-y、no-repeat,預設為repeat。雖然有預設值,但是第二個引數不可預設,否則會報錯。
3、使用canvas.clip()可以對點陣圖(就是圖片,包括drawImage()、createPattern()匯入的圖片)實現裁剪功能。clip()方法無論放在點陣圖顯示程式碼的上面還是下面,都可以對點陣圖進行裁剪。
注意:使用canvas.save();和canvas.restore();方法,可以略去clip()的設定
canvas.save();
canvas.arc(...);
canvas.clip(); //此時的clip()設定不發生作用
canvas.restore();
canvas.drawImage(...);