畫布：canvas
一.Canvas的API
-
getContext('2d'):獲取canvas 2D繪制對象诀豁，//可選性‘webGL’:3D
var 自定義變量名 = document.getElementById('畫布的ID')//獲取畫布節(jié)點(diǎn) var 自定義變量名 = 畫布的變量名.getContext('2d') -
moveTo()：移動筆觸
ctx.moveTo(X軸钱豁，y軸)//起始點(diǎn) -
lineTo()：確認(rèn)線的終點(diǎn)
ctx.lineTo(X軸，y軸)//結(jié)束點(diǎn) -
stroke()：繪制輪廓
ctx.stroke()//繪制輪廓 -
lineWidth：線的粗細(xì)
ctX.lineWidth=5 -
strokeStyle：線條顏色
ctx.strokeStyle='red' -
beginPath： 路徑開始
ctx.beginPath() -
closePath：路徑結(jié)束
ctx.closePath() -
lineCap：線帽//butt默認(rèn)//round圓角//square直角
ctx.linCap='butt' ctx.linCap='round' ctx.linCap='square' -
lineJoin：設(shè)置拐角//round圓角//miter默認(rèn)直角//bevel斜角
ctx.lineJoin='round' -
rect：定義路徑
ctx.rect(x軸起點(diǎn)屿脐，y軸起點(diǎn)，矩形寬度，矩形高度) -
fill：填充矩形
ctx.fill() -
fillStyle：填充顏色
ctx.fillStyle='yellow' -
strokeRect：輪廓矩形
ctx.strokeRect(x軸起點(diǎn)的诵，y軸起點(diǎn)万栅，矩形寬度，矩形高度) -
clearRect：清空某塊區(qū)域
ctx.clearRect(x軸起點(diǎn)西疤，y軸起點(diǎn)烦粒，清除寬度，清除高度) -
fillRect()：矩形填充
ctx.fillRect() -
arc(原點(diǎn)x代赁，原點(diǎn)y扰她，半徑，起始弧度管跺，結(jié)束角度义黎，布爾值false：代表順時針):畫圓
注釋：Math.PI：180°
ctx.arc(200,200,100,0,Math.PI*2,false) -
save()：保存當(dāng)前原點(diǎn)位置
ctx.save() -
restore()：讀取上一個保存原點(diǎn)
ctx.restore() -
translate：移動原點(diǎn)的坐標(biāo)
ctx.translate(x,y) -
rotate()：旋轉(zhuǎn)
ctx.rotate(Math.PI/4) scale()：2D轉(zhuǎn)換
-
fillText()：繪制文本
cxt.fillText('文字',x軸,y軸) fot：繪制文本的字體樣式
-
drawImage()：
var newsPic = new Image() newsPic.src='圖片地址' //等待圖片資源加載完畢，在繪制圖片 newsPic.onload = function(){ cxt.drawImage(newsPic,x軸偏移,y軸偏移)//取三個值 cxt.drawImage(newsPic,x軸偏移,y軸偏移,寬豁跑，高)//取五個值 cxt.drawImage(newsPic,剪切x廉涕，剪切y，剪切原圖寬,剪切原圖高艇拍，x軸偏移,y軸偏移,顯示寬度狐蜕，顯示高度)//九個值 }
