canvas學習筆記--by Damon
基礎用法
- 默認寬高300x150
- 標簽
- 渲染上下文
繪制形狀
矩形 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)
// 一次和二次貝塞爾曲線， 區別，控制點一個和兩個
path2D
var path2D = new Path2D();
// 為路徑對象，存儲路徑，直到最后使用
// path2D.rect....
// ctx.fill(path2D)
Paste_Image.png
