12.16學(xué)習(xí)經(jīng)驗(yàn)分享#
Bruce_Zhu于2016.12.16
一、canvas-創(chuàng)建路徑繪制線條(直線和折線、多邊形)
- 繪制方法
1）設(shè)置起點(diǎn)坐標(biāo)值
moveTo(x,y);
2）設(shè)置終點(diǎn)(折點(diǎn))坐標(biāo)值
lineTo(x,y);
- 繪制線條的屬性
1）設(shè)置線條的寬度，默認(rèn)1px
lineWidth
2）設(shè)置線條端點(diǎn)的形狀
lineCap
butt - 平角
round - 圓角
square - 正方向
3）設(shè)置兩條線交點(diǎn)的形狀
lineJoin
miter - 尖角
round - 圓角
bevel - 斜角
4）miterLimit - 配合lineJoin使用
lineJoin設(shè)置為miter，該屬性值設(shè)置尖角延伸范圍
二、canvas繪制圖片
1、 按照圖片原大小加載
drawImage(img,x,y)
img - 當(dāng)前加載的圖片
x和y - 圖片左上角的位置
注意： 必須要保證圖片加載完畢(onload事件)后，再繪制圖片
-
平鋪圖片
var ptn = createPattern(img,type) 返回一個(gè)平鋪對象，將這個(gè)對象作為將要繪制圖像的填充顏色
img : 平鋪的圖片
type: 平鋪的方式repeat/no-repeat/repeaet-x/repeat-y
注意：
必須要保證圖片加載完畢(onload事件)后，再繪制圖片，createPattern也要等到圖片加載完畢后執(zhí)行
三、切割圖片
按照創(chuàng)建路徑使用
clip()
四、 畫布方法
1、 scale(x,y); - 縮放
x - 水平方向上的縮放
y - 初值方向上的縮放
context.scale(sx,sy);
context.fillRect(x,y,width,height);
sx:讓x和width相對于畫布左上角進(jìn)行縮放
sy:讓y和height相對于畫布左上角進(jìn)行縮放
兩次scale在一個(gè)會(huì)產(chǎn)生疊加效果
2、translate(x,y) - 重新映射畫布上的（0,0）位置
context.translate(tx,ty);
tx和ty改變了矩形的x和y的參考點(diǎn)
3、rotate(); 旋轉(zhuǎn)畫布
degrees * Math.PI / 180;
4、save() 保存當(dāng)前畫布屬性、狀態(tài)
5、resotre() 恢復(fù)畫布屬性狀態(tài)
六、Chart.js插件的學(xué)習(xí)教程
