canvas画布：pattern和双缓存技术应用实例

马黑黑 · 发表于 2024-4-3 12:09

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-4-3 12:11

代码：

var cw1 = canv.width, ch1 = canv.height, cw2 = 100, ch2 = 100;

var tcanv = document.createElement('canvas');

tcanv.width = cw2, tcanv.height = ch2;

var ctx = canv.getContext('2d'), tctx = tcanv.getContext('2d');

function flash() {

tctx.clearRect(0, 0, cw2, ch2);

for (var i = 0; i < ch2 / 20; i++) {

for (var j = 0; j < cw2 / 20; j++) {

tctx.save();

tctx.fillStyle = `#${Math.random().toString(16).substr(-6)}`;

var x = 20 * i + 10, y = 20 * j + 10, r = 6;

tctx.beginPath();

tctx.arc(x, y, r, 0, Math.PI*2);

tctx.fill();

tctx.restore();

}

ctx.clearRect(0, 0, cw1, ch1);

var pattern = tctx.createPattern(tcanv, 'repeat');

ctx.fillStyle = pattern;

ctx.fillRect(0, 0, cw1, ch1);

/* 仅描边

ctx.strokeStyle = pattern;

ctx.lineWidth = 40;

ctx.strokeRect(0, 0, cw1, ch1);

*/

/* 动态

requestAnimationFrame(flash);

*/

};

flash();

</script>

马黑黑 · 发表于 2024-4-3 12:11

本帖最后由马黑黑于 2024-4-3 12:35 编辑

canvas双缓存技术

canvas双缓存是这么一个机制：两个canvas画布，一个负责呈现内容（此处成为画布1），另一个在内存中运行、负责实现绘制机制（此处称为画布2）。其作用是预防延时，毕竟画布在绘制复杂的动画时非常耗时，若在指定时间内未能完成，呈现在页面上的效果就会大打折扣，比如闪烁、卡顿、画面空白或花纹紊乱等等。

通常，画布2不作为一个实体标签呈现在页面上，除非需要。二楼代码第五行，创建了一个画布：

var tcanv = document.createElement('canvas');

但后面没有追加到任何地方。tcanv 一旦创建，就是一个事实存在的画布，运行于缓存中，可以像真实的画布一样操作。代码中，函数 flash 从第 10 行到第 21 行，都是在操作 tcanv 即画布2，所做的事情是在上面绘制 5列*5行的小小圆球，圆球半径为 6 个像素、占位 20px，填充颜色随机。

画布1充当前台呈现的舞台，它可以照搬画布一的一切，在函数的每一次执行中将画布1的成果搬到自己的舞台渲染；因为效果的实际实现过程不再它那里运作，它仅将画布2的结果克隆过来，因此可以保证画面的延续性和流畅性。flash函数代码中，第 22 行到第 25行是针对它的操作，在其上绘制小圆球。

马黑黑 · 发表于 2024-4-3 12:11

本帖最后由马黑黑于 2024-4-3 12:53 编辑

canvas pattern 图案

canvas画布可以将图片标签、视频标签、画布标签等等的内容作为图案 pattern 来绘制图形。首先，画布需要创建 pattern 图案：

let p = ctx.createPattern(源, 是否重复);

//例如: 假如有一个 img 标签 id=“mypic"

let p = ctx.createPattern(mypic, 'repeat');

上例，所创建的pattern图案，第一个参数是 mypic ，即源，这里的 mypic 是一个img标签的id标识。第二个参数放在引号里，因为它是字符串描述语，repeat 标识重复，xy方向都重复，还有另外三个值可选用：repeat-x、repeat-y、no-repeat。

pattern 创建之后，就可以通过 fill() 或 stroke() 使用，例如：

ctx.fillStyle = p;
ctx.fillRect(0,0,400,200);

这将使用已经创建的 pattern 来填充一个 400*200 的矩形。若想填充一个圆，则使用 arc(...) 先描述圆，然后 fill() 即可。

若想以描边方式绘制pattern图案，则将 fillStyle 改为 strokeStyle 即可。

马黑黑 · 发表于 2024-4-3 12:12

本帖最后由马黑黑于 2024-4-3 13:00 编辑

其他说明

cnavas画布的双缓存技术不一定用于pattern图案绘制，任何复杂的动画都可以使用。本文是想一炮两响，就将实例做成了酱紫。

函数 flash 本意是令小小圆球不断闪烁，当然这里的闪烁是一种追求的效果，不是画布受性能影响而产生的闪烁。一楼之所以不启用闪烁功能，主要是为了方便阅读。有兴趣的朋友，可以将代码拿到 pencil code 环境去运行，运行前将第 31、33 行的代码注释符号去掉。