基于狀態(tài)繪圖 ,每次繪制都會檢查所有狀態(tài)
context.beginPath()//全新的路徑繪制
context.closePath()
beginPath和lineTo合用相當(dāng)于moveTo
beginPath和closePath合用解決閉合處問題
fillStyle() fill()
先描邊后填充的話，填充會覆蓋掉線條的一半
解決方法：先填充后描邊
context.rect（x,y,width,height）
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
context.clearRect(x,y,width,height)//清空
context后繪制的圖形會覆蓋前面圖形
線條的屬性：
lineCap:butt(default) square[多出方頭]round[多出一半的圓頭]
只能用于開頭和結(jié)尾，不能用于銜接處
lineJoin:miter(default) bevel[斜接] round[圓角]
miterLimit：10 ，超過即用bevel
圖形變化的機(jī)制
圖形變化會疊加，如使用兩次translate（100,100）translate（300,300）最后一次translate會疊加至400,400
解決方法：context.save();context.restore()返回save之前的狀態(tài)
rotate(x,y)
scale（deg）//不僅僅放大圖標(biāo)的大小，也會縮放坐標(biāo)、邊框
translate(sx,sy)//改變基坐標(biāo)
transform(a,b,c,d,e,f)變換矩陣[繼續(xù)學(xué)習(xí)]
setTransform()
填充或描邊類型
fillStyle/strokeStyle:gradient pattern color
線性漸變：漸變線可以水平、垂直 、傾斜
var grd=context.createLinearGradient(xstart,ystart,xend,yend)
grd.addColorStop(floatend,color)
如果漸變線只指定了canvas的一部分區(qū)域，則最前面的漸變色或最后邊的漸變色補(bǔ)充不足的區(qū)域
radial gradient
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1)
圖片填充createPattern
createPattern(img/canvas/video,repeat-style)
no-repeat repeat-y repeat-x repeat
【填充canvas】
曲線的繪制：
arc
context.arc(centerx,centery,radius,startAngle,endingAngle,anticlockwise=false)
不論逆時針還是順時針，angle是保持不變的
【畫帶弧線的圓角矩形】【畫2048】
arcTo(x1,y1,x2,y2,radius)
(x0,y0)由moveTo或lineTo決定
【畫月亮】
字體樣式：
context.font="bold 40px Arial"
context.font="20px sans-serif"http://默認(rèn)
font-style:normal italic/斜體字/ oblique/字體角度傾斜/
font-variant:normal small-caps/小型大寫字母/
font-weight:lighter normal bold bolder
font-size:20px 2em 150%
font-family: @font-face
文本對齊
context.textAlign=left|center|right
context.textBaseline=top|middle|bottom|alphabetic(基于拉丁)|ideographic(方塊文字)|hanging(印度語)
文本的度量：
context.measureText(string).width//根據(jù)設(shè)置的font屬性計(jì)算文本寬度
【填詞系統(tǒng)】
context.fillText(string,x,y,[maxlen])
context.strokeText(string,x,y,[maxlen])
陰影繪制
context.shadowColor
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur//控制邊緣模糊程度
global【碰撞的小球】
globalAlpha=1(default)//全局透明度
globalCompositeOperation//圖形的壓蓋 情況，默認(rèn)后繪制的圖形壓蓋前面繪制的圖形
="source-over"(default)|destination-over
source-over|source-atop|source-in|source-out
destination-over|destination-atop|destination-in|destination-out
lighter//重疊部分沖計(jì)算顏色
copy
xor
剪輯區(qū)域【探照燈】
context.clip()//剪切自定義的區(qū)域?yàn)槔L制環(huán)境
非零環(huán)繞原則【剪紙效果】
判斷內(nèi)側(cè)和外側(cè)
canvas與瀏覽器的兼容
用戶提示文字
canvas.elipse
explorecanvas老式瀏覽器托管
---未完待更----
