在JavaScript中， <canvas> 標(biāo)簽用于繪制圖像，畫布是一個(gè)矩形區(qū)域，可以控制其每一像素。
不過，<canvas> 元素本身并沒有繪制能力（它僅僅是圖形的容器） - 必須使用腳本來(lái)完成實(shí)際的繪圖任務(wù)。
//定義一個(gè)畫布并賦予寬高，寬高不能在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); //描邊文字``
//在畫布上畫一個(gè)圓
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逆時(shí)針，false順時(shí)針)) //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(); //全部填充，第一個(gè)默認(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)于清除整個(gè)畫布
//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軸上的平移量) //這些方法只對(duì)下文內(nèi)容生效(會(huì)將坐標(biāo)，大小進(jìn)行改變)
//繪制貝塞爾曲線
//二次貝塞爾曲線
//二次貝塞爾曲線,有三個(gè)點(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)，兩個(gè)控制點(diǎn) ctx.moveTo(0,canvas.height); //開始點(diǎn)坐標(biāo) ctx.bezierCurveTo(0,0,500,500,canvas.width,0); //兩個(gè)控制點(diǎn)的坐標(biāo)和結(jié)束點(diǎn)坐標(biāo) ctx.stroke(); ctx.closePath();
