记录一些自己写canvas demo后理解的点
// 这是前提
let ctx = canvas.getContext('2d');
0. 我绘制了一个钟表
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) // 一个控制点
网友评论