在JavaScript中， <canvas> 標(biāo)簽用于繪制圖像鉴竭，畫布是一個矩形區(qū)域，可以控制其每一像素岸浑。
不過拓瞪，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 必須使用腳本來完成實(shí)際的繪圖任務(wù)。
//定義一個畫布并賦予寬高助琐，寬高不能在css中設(shè)置祭埂，只能在參數(shù)的屬性width和height中設(shè)置
<canvas id="canvas" width="500" height="500"></canvas>;
//在script獲取canvas
var canvas = document.getElementById('canvas');
//獲取上下文
var ctx = canvas.getContext('2d');
//繪制文字
ctx.font = '30px 黑體'; //文本 設(shè)置文本屬性，需要先設(shè)置才能進(jìn)行文字繪制 ctx.strokeText('my name is jason',100,100) //描邊文字 ctx.fillStyle = 'skyblue'; //填充顏色 ctx.fillText('my name is jason',100,100); //填充文字
//canvas陰影
`` ctx.shadowColor = 'black'; //設(shè)置陰影顏色
ctx.shadowBlur = 5; //陰影模糊程度
ctx.shadowOffsetX = 5; //顯示陰影在x軸上的偏移量
ctx.shadowOffsetY = 5; //顯示陰影在y軸上的偏移量
ctx.font = '50px 宋體'; //設(shè)置字體
ctx.strokeText('hello!',100,250); //描邊文字``
//在畫布上畫一個圓
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); //開始繪制 var deg = Math.PI/180; //定義deg //arc:(圓心坐標(biāo)x,圓心坐標(biāo)y,radius半徑,startange開始路徑兵钮，endangle終止路徑蛆橡，繪畫方向(true逆時針，false順時針)) //360*deg也可以寫成2*Math.PI（Math.PI = 180deg掘譬，但是不可以直接寫360deg泰演，需要先定義deg） ctx.arc(250,250,100,0,360*deg,true); ctx.closePath(); //結(jié)束繪制 ctx.stroke(); //描邊 ctx.fillStyle = 'red'; //設(shè)置填充顏色 ctx.fill(）； //填充顏色
//繪制矩形 兩種方式
① ctx.rect(100,100,100,100);; //(起點(diǎn)坐標(biāo)x,起點(diǎn)坐標(biāo)y,寬葱轩，高) ctx.stroke(); ctx.fill(); //全部填充睦焕，第一個默認(rèn)顏色是黑色 ctx.fillStyle = 'red'; //改變填充顏色 ② ctx.fillRect(200,200,100,100); //默認(rèn)填充黑色
//清除 clearRect
ctx.clearRect(0,0,canvas.width,canvas.height); //(起點(diǎn)坐標(biāo)x,起點(diǎn)坐標(biāo)y,寬，高) ,所示代碼相當(dāng)于清除整個畫布
//canvas中圖形變換的方法
var deg = Math.PI/180; ctx.rotate(45*deg); //rotate:旋轉(zhuǎn) ctx.scale(0.5,0.5); //scale:縮放靴拱，(x方向上的縮放比例,y方向上的縮放比例) ctx.translate(100,100) //translate:平移 (X軸上的平移量垃喊，Y軸上的平移量) //這些方法只對下文內(nèi)容生效(會將坐標(biāo)，大小進(jìn)行改變)
//繪制貝塞爾曲線
//二次貝塞爾曲線
//二次貝塞爾曲線,有三個點(diǎn):開始點(diǎn)袜炕，結(jié)束點(diǎn)本谜，控制點(diǎn) ctx.moveTo(0,canvas.height); //開始點(diǎn)坐標(biāo) ctx.quadraticCurveTo(0,0,canvas.width,0) //(控制點(diǎn)x,控制點(diǎn)y,結(jié)束點(diǎn)x,結(jié)束點(diǎn)y) ctx.stroke(); ctx.closePath();
//三次貝塞爾曲線
//三次貝塞爾曲線，開始點(diǎn)偎窘，結(jié)束點(diǎn)乌助，兩個控制點(diǎn) ctx.moveTo(0,canvas.height); //開始點(diǎn)坐標(biāo) ctx.bezierCurveTo(0,0,500,500,canvas.width,0); //兩個控制點(diǎn)的坐標(biāo)和結(jié)束點(diǎn)坐標(biāo) ctx.stroke(); ctx.closePath();
