在看一本, 《html5 canvas 核心开发》。
名字看着很大， 但是内容好像很基础。 适合我。作者开头带人就去看一下canvas到底有什么， 看了一下， 确实东西不多。 做个记录
一个 canvas 只有 宽高，两个属性。 人类果然是喜欢方形的东西呢。
方法的话， 书上说是3个， 我只找到2个。
- getContext（）
- toDataURL()
2的返回就是个 data://的url,字符串, 所以没啥东西. 干活的部分, 都是在 1里.
1返回的是 context 在这, 参数可以用 'webgl', 也可以'2d'. 不写3d的话, 一般都是2d了.
2d 得到的内容也不算多, log出来,发现就几个.
canvas: canvas fillStyle: "#000000" font: "10px sans-serif" globalAlpha: 1 globalCompositeOperation: "source-over" imageSmoothingEnabled: true lineCap: "butt"lineDashOffset: 0 lineJoin: "miter" lineWidth: 1 miterLimit: 10 shadowBlur: 0 shadowColor: "rgba(0, 0, 0, 0)" shadowOffsetX: 0 shadowOffsetY: 0 strokeStyle: "#000000" textAlign: "start" textBaseline: "alphabetic" webkitImageSmoothingEnabled: true
一个canvasRenderingContext2D 就这几个属性.
prototype 里有些函数, 但也没太多.
果然, 画图这东西, 工具都一样简单, 腐朽还是神奇, 那只能分人了.
不过,还是先熟练工具, 才有后面的话.
默认情况下, fillText 给出的起始坐标, 是 字 左下角的 坐标位置. 所以, 一开始我偷懒用的 0,0. 全都没显示出来. 这句也不太对, 准确来说是 字幕 基线的左角.
透明度是0-1 随便可以设置的. 没啥好说的. 不过, 这些属性少得可怜, 都是ctx 全局的. 或许这就是save 和restore出现的原因吧.实在是太无聊了.
shadowBlur 有趣, 不过, 指的不是像素. 高斯模糊 是说运用了 高斯分布, 这里值是 标准偏差. 数学啊,数学.
真正shadow的偏移用的是 OffsetX,Y. o(︶︿︶)o 唉.
自从有了 requestAnimationFrame 啥都省了... 不错.
双 canvas 何其必要, 简单画个钟表就看到了, 每一帧都要重画
save restore 是针对 canvas的 那几个 属性来说的.
getImageDate 和 putImageData 是根据画面的整体像素来说的.