一雀摘、canvas-創(chuàng)建路徑繪制線條(直線和折線裸删、多邊形)
繪制方法
1）設置起點坐標值 moveTo(x,y);
2）設置終點(折點)坐標值 lineTo(x,y);繪制線條的屬性
1）設置線條的寬度，默認1px lineWidth
2）設置線條端點的形狀 lineCap
butt - 平角 round - 圓角 square - 正方向
3）設置兩條線交點的形狀 lineJoin
miter - 尖角 round - 圓角 bevel - 斜角
4）miterLimit - 配合lineJoin使用
lineJoin設置為miter阵赠，該屬性值設置尖角延伸范圍
代碼
效果
二涯塔、canvas繪制圖片
1肌稻、 按照圖片原大小加載
drawImage(img,x,y)
img - 當前加載的圖片
x和y - 圖片左上角的位置
注意： 必須要保證圖片加載完畢(onload事件)后，再繪制圖片
-
平鋪圖片
var ptn = createPattern(img,type) 返回一個平鋪對象匕荸，將這個對象作為將要繪制圖像的填充顏色
img : 平鋪的圖片
type: 平鋪的方式repeat/no-repeat/repeaet-x/repeat-y
注意：
必須要保證圖片加載完畢(onload事件)后爹谭，再繪制圖片，createPattern也要等到圖片加載完畢后執(zhí)行
代碼
效果圖
三榛搔、切割圖片
按照創(chuàng)建路徑使用
clip()
代碼
效果圖
四诺凡、 畫布方法
1、 scale(x,y); - 縮放
x - 水平方向上的縮放
y - 初值方向上的縮放
2践惑、translate(x,y) - 重新映射畫布上的（0,0）位置
3腹泌、rotate(); 旋轉畫布
degrees * Math.PI / 180;
代碼
效果圖
