什么是Canvas？
<canvas> 是 HTML5 新增的元素历极，可使用JavaScript腳本來繪制圖形毁菱。例如：畫圖米死，合成照片，創(chuàng)建動畫甚至實時視頻處理與渲染贮庞。
開始之前
使用 <canvas> 元素不是非常難但你需要一些基本的HTML和JavaScript知識峦筒。<canvas> 元素不被一些老的瀏覽器所支持，但是所有的主流瀏覽器的新近版本都支持窗慎。Canvas 的默認大小為300像素×150像素（寬×高物喷，像素的單位是px）卤材。但是，可以使用HTML的高度和寬度屬性來自定義Canvas 的尺寸峦失。為了在 Canvas 上繪制圖形扇丛，我們使用一個JavaScript上下文對象，它能動態(tài)創(chuàng)建圖像（ creates graphics on the fly）尉辑。
注意事項
雖然可以通過CSS來控制<canvas>大小帆精。但在渲染過程中<canvas>元素中的內容會根據(jù)情況縮放來適應需要的大小。如果您發(fā)現(xiàn)<canvas>元素中展示的內容變形隧魄，您可以通過內聯(lián)方式或通過JavaScript進行寬高相關設置卓练，而不要使用CSS。例：
<canvas id="canvas" width="300" height="300">
Sorry, your browser doesn't support the <canvas>
element.
</canvas>
下面開始canvas繪圖
初始化
var canvas=document.getElementById('canvas')
var context=canvas.getContext('2d')
繪圖為狀態(tài)繪圖堤器，應該先進行狀態(tài)設置昆庇，再選用函數(shù)進行具體繪制
因為canvas為狀態(tài)繪圖，則會導致在繪圖時之前的狀態(tài)設置也會同時進行設置闸溃，造成覆蓋
beginPath()和closePath()
beginPath()：開始一條路徑整吆，或重置當前的路徑。
closePath()：如果畫布的子路徑是打開的辉川，closePath() 通過添加一條線條連接當前點和子路徑起始點來關閉它表蝙。
線條屬性
- lineCap ：用于設置線條兩端形狀 只能用于線段的開始處和結尾處，不能用于連接處
- butt(default)
- round
- square
- lineJoin：線條相交時的形態(tài)
- miter(default) miterLimit:內角和外角的最大值如果超過就用bevel方式顯示
- bevel
- round
填充樣式 fillStyle
漸變色填充
- 線性漸變色
//Step1
var grd=context.createLinearGradient(xstart,ystart,xend,yend);
//Step2
//stop:浮點值 漸變色位置
grd.addColorStop(stop,color);
- 徑向漸變
var grd=context.createRadialGradient(x0,y0,r0,x1,y1,r1);
grd.addColorStop()
- createPattern
createPattern(img,repeat-style)
repeat-style:no-repeat
:repeat-x
repeat=y
repeat
createPattern(canvas,repeat-style)
createPattern(video,repeat-style)
曲線繪制
arc
context.arc(
centerx,centery,radius,
startingAngle,endingAngle,
anticlockwise=false
)
centerx,centery：圓心坐標
radius：半徑
startingAngle乓旗，endingAngle：從哪一個弧度值為始府蛇，結束于哪一個弧度值
anticlockwise：順時針（false）繪制 逆時針時針繪制
圓形繪制
arcTo
將當前的點坐標（moveTo等）傳入x1,y1,x2,y2后將會形成一個由兩個線段組成的折線，將從x0,y0開始繪制,x1,y1,x2,y2告訴圓弧用那兩條線當作切線屿愚，但是切點不一定在這兩條線段上
context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,radius);
貝塞爾二次曲線
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);
貝塞爾三次曲線
context.moveTo(x0,y0);
context.bezierCurveTo(
x1,y1,x2,y2,x3,y3
)
文字渲染
context.font='bold 40px Arial'
context.fillText(string,x,y,[maxlen])
默認值：20px sans-serif
context.font 和css中font相同
文字渲染
文本對齊
//水平
context.textAlign='left/center/right'
//垂直
context.textBaseline='top/middle/bottom/alphabetic(Default基于拉丁語的基準線)/ideographic(基于中文汇跨、日文的基準線)/hanging(基于印度語的基準線)'
文本的度量
context.measureText(string).width
陰影
context.shadowColor
//陰影偏移量
context.shadowOffsetX
context.shadowOffsetY
//陰影模糊值
context.shadowBlur
全局
//全局透明度
context.globalAlpha
//繪制的圖像重疊時產(chǎn)生的效果
context.globalCompositeOperation='source-over(Default)/destination-over(先繪制的圖形在上面)'
剪輯區(qū)域
context.clip()
非零環(huán)繞原則
參考資料：非零環(huán)繞原則
圓環(huán)繪制
圖形變換
- 位移：translate(x,y)
- 旋轉：rotate(deg)
- 縮放：scale(sx,sy) 不僅僅放大圖像大小，對坐標線條寬度等也會縮放
圖形變換是疊加的
canvas.save()/.restore()：保存/返回圖形狀態(tài)
transformation
tarnsform
context原型
CanvasRenderingContext2d
綜合應用
本文旨在記錄在初步學習canvas當中用到的一些方法妆距，個人認為canvas主要需要對圖形計算的熟悉穷遂，繪制圖形之前需要先計算好繪制的路徑，例如每個角的角度等等娱据，詳細學習路徑請查看
Canvas教程
文中代碼地址：
GitHub
