canvas 笔记

记录一些自己写canvas demo后理解的点

// 这是前提
let ctx = canvas.getContext('2d');

0. 我绘制了一个钟表

点击查看 http://jsrun.net/vY6Kp

1. ctx.save() 都能保存什么内容？

路径颜色宽度等等属性肯定是可以保存的。
变换上下文也能被保存，代码示例：http://jsrun.net/zY6Kp/edit

2. ctx.closePath() 是用来闭合路径的，而不是关闭 ctx.beginpath()

3. 扩展 ctx

2d ctx是CanvasRenderingContext2D的实例，
所以可以通过下面的方式扩展ctx

CanvasRenderingContext2D.prototype.test = function(){}
// 扩展后可以这样调用
ctx.test();

我自己扩展了一个绘制圆角矩形的方法：http://jsrun.net/aY6Kp/edit

4. 神奇的贝塞尔曲线

ctx 提供了两个贝塞尔曲线方法：

ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x, y) // 两个控制点
ctx.quadraticCurveTo(c1x, c1y, x, y) // 一个控制点