前言：
即使行動(dòng)導(dǎo)致錯(cuò)誤，卻也帶來了學(xué)習(xí)與成長(zhǎng)遇西；不行動(dòng)則是停滯與萎縮
--------------------------------正文---------------------------------
畫弧
gd.arc(cx,cy,r,s,e,d);
cx,cy 圓心位置
r 半徑
s 開始的弧度
e 結(jié)束的弧度
d 是否逆時(shí)針
文字
gd.font="大小 類型";
gd.textAlign 水平對(duì)齊 center
gd.textBaseline 基線對(duì)齊 middle
gd.strokeText(str,x,y);
gd.fillText(str,x,y);
漸變
線性漸變
var lg = gd.createLinearGradient(x1,y1,x2,y2);
lg.addColorStop(0-1,color);
球形漸變
var rg = gd.createRadialGradient(cx1,cy1,r1,cx2,cy2,r2);
rg.addColorStop(0-1,color);
旋轉(zhuǎn)馅精、平移、放大
rotate\translate\scale
所有操作的原點(diǎn)都是畫布的左上角
操作的都是畫布
操作rotate粱檀、translate洲敢、scale
畫圖
還原
eg:
保存畫布當(dāng)前狀態(tài)
gd.save();
操作
畫圖
還原回去
gd.restore();
獲取圖片數(shù)據(jù)
var data = oC.toDataURL('類型');
image/png 默認(rèn)
image/jpeg
圖片背景
oImg.onlaod= function (){
var cp = gd.createPattern(oImg,'平鋪方式');
//.......
};
引入外部圖片
gd.drawImage(
oImg,
dx, dy
);
gd.drawImage(
oImg,
dx, dy, dw, dh
);
gd.drawImage(
oImg,
sx, sy, sw, sh,
dx, dy, dw, dh
);
canvas、svg區(qū)別
canvas
位圖
放大會(huì)失真
性能高
游戲茄蚯、效果压彭、動(dòng)畫
svg
矢量圖
放大不會(huì)失真
性能差
小圖標(biāo)
不兼容低版本瀏覽器
WebWorker
如何開啟多線程
一個(gè)線程就是一個(gè)js
主線程
子線程
注意:
不能操作BOM
不能操作DOM
計(jì)算
主線程和子線程之間通信
發(fā)送
worker.postMessage(data);
接收
worker.onmessage = function(ev){
ev.data;
};
子線程不能再開子線程。
不能跨域
WebSQL Web端的數(shù)據(jù)庫
WebGL 動(dòng)畫
WebWorker 多線程
WebSocket 雙向交互
主動(dòng)響應(yīng)客戶端
不只是前端的事渗常，需要后臺(tái)配合哮塞。
