【canvas】
畫圖
和img類似
兼容性高級瀏覽器
canvas里面想要畫畫必須用js配合
//1、準(zhǔn)備一直筆
var gd=oC.getContext('2d');//畫筆
//2、把筆移動到起始位置
gd.moveTo(306,237);
//3、劃線（選區(qū)，看不到需要描邊或者填充）
gd.lineTo(401,85);
//閉合路徑
gd.closePath(); //收尾直接連接起來
//描邊顏色(先選顏色再描邊)
gd.strokeStyle='red';
//線寬(里外同時擴展)
gd.lineWidth=30; //不寫單位
//填充的顏色
gd.fillStyle='blue';
//5填充
gd.fill();
//4、描邊
gd.stroke();
注：先填充在描邊和先描邊再填充效果不一樣
如果想畫新的東西，創(chuàng)建一個新的路徑
gd.beginPath() //把之前的效果屏蔽了
畫畫的流程；
gd.beginPath()
理論上：可以話任何東西
隨機生成一堆點連成線
--------------------
畫一個矩形
1)moveTo()? lineTo()
2)gd.strokeRect(x,y,w,h)? //自帶的畫矩形
//填充的矩形
gd.fillRect(100,100,200,100);
例子：簡易柱狀圖
[300,200,50,80,250,800]
call
fn.call(this的指向，參數(shù)，參數(shù))
apply
fn.apply(this的指向，[參數(shù)，參數(shù)])
-------------------------
canvas運動
先清后畫
gd.clearRect(0,0,oC.width,oC.height);
幀頻 60fps
低幀頻 30
高幀頻 1000/60? 16 17
canvas性能極高
例子：屏保
注：點動，速度
作業(yè)：變顏色
----------------------
圓
gd.arc(cX,cY,r,起始的角度，結(jié)束的角度，是否逆時針)
弧度? ? ? ? 弧度
gd.stroke();
圓弧
角度轉(zhuǎn)成弧度
360 2PI
180 PI
1? PI/180
n? n*PI/180
function d2a(n){
return n*PI/180
}
注：起始點在右邊
畫餅的步驟
gd.arc(200,200,100,d2a(0),d2a(30),false); //先畫圓弧
gd.lineTo(200,200); //鏈接到中心
gd.closePath(); //閉合線路
gd.stroke();//描邊
畫餅狀圖
[200,100,300,50,30]
進度條
信號器
表
