canvas學(xué)習(xí)筆記--by Damon

基礎(chǔ)用法

1. 默認(rèn)寬高300x150
2. 標(biāo)簽
3. 渲染上下文

繪制形狀

矩形 rect

ctx.fillRect(x, y , w, h)
// x, y => position
// w, h => width and height
ctx.strokeRect
// 邊框沒有顏色
ctx.clearRect

除了矩形外都需要先建立好路徑，然后填充操作
beginPath => closePath => stroke/fill

triangle/line

ctx.moveTo(x, y)
ctx.stroke()
ctx.

arc

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

bezier

ctx.quadraticCurveTo(cp1x, cp1y, x, y) 
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
// 一次和二次貝塞爾曲線， 區(qū)別，控制點一個和兩個

path2D

var path2D = new Path2D();
// 為路徑對象，存儲路徑，直到最后使用
// path2D.rect....
// ctx.fill(path2D)

Paste_Image.png

代碼地址
Demo地址