【Canvas 系列】通过上下分层优化 Canvas 书写性能

前言

上一节 【Canvas系列】通过贝塞尔曲线解决 Canvas 书写的圆滑问题,我们通过点稀疏的方式,优化了 Canvas 的绘制性能。但在书写的过程中,因为点数量减少导致书写的效果不够理想,因此通过贝塞尔曲线的方式,将点连接起来,形成平滑的曲线,从而达到书写的效果。 这节,我们将通过上下分层的方式,优化 Canvas 的书写性能。

基本思路

这里我将 Canvas 分为上下两层,上层称之为动态层,下层称之为静态层,动态层用于书写,静态层用于显示书写的效果。当书写的时候,将书写的点绘制到上层,当书写完成后,将上层的内容绘制到下层,然后清空上层的内容,这样就可以达到书写的效果。

因为 Canvas 每次渲染都会将整个 Canvas 清空,所以我们需要将静态层的内容保存下来,然后在每次书写的时候,只需要渲染当前动态层的内容即可。

实现

创建 2 个 Canvas

首先创建 2 个 Canvas, 上层 Canvas 用于书写, 书写完成后将上层 Canvas 的内容绘制到下层 Canvas 中, 然后清空上层 Canvas 的内容, 这样就可以达到书写的效果。

这样的好处在于, 每次书写的时候, 只需要渲染上层 Canvas 的书写内容即可, 不需要每次都渲染整个 Canvas, 从而达到优化性能的目的。

html 复制代码
<style>
    #draw {
        border: 1px solid black;
        position: absolute;
        z-index: 9999;
    }

    #draw-content {
        border: 1px solid black;
        position: absolute;
        z-index: 9998;
        pointer-events: none;
    }
</style>

<!-- 动态层 Canvas -->
<canvas id="draw"></canvas>
<!-- 静态层 Canvas -->
<canvas id="draw-content"></canvas>

数据动静切换

笔者创建了 2 个 Canvas 后, 可以在书写的过程中(监听 pointerMove 事件),现在数据渲染到动态层 Canvas 上

当书写完成后(监听 pointerUp 事件),将动态层 Canvas 的内容渲染到静态层 Canvas 上

html 复制代码
<script>
    /**
     * 自由画笔的实现思路
     * 1 监听鼠标事件 
     * 2 将鼠标移动的轨迹记录下来
     * 3 然后将这些点连接成线
     */
    canvas.addEventListener('pointerdown', (e) => {
        start = true; // 通过监听鼠标按下事件,来判断是否开始绘制
        addPoint((e)); // 将鼠标按下的点添加到points数组中
    });

    canvas.addEventListener('pointermove', (e) => {
        if (!start) return; // 如果没有按下,则不绘制
        addPoint((e)); // 将鼠标移动的点添加到points数组中
        renderUpperCanvas(ctx); // 绘制上层
    });

    canvas.addEventListener('pointerup', (e) => {
        start = false;
        // 将上层 canvas 绘制的内容保存到下层 canvas 中
        history.push(points);
        points = []; // 绘制完毕后,清空points数组
        renderLowerCanvas(ctx, ctxContent);
    });
</script>

演示效果

这里我将动静 Canvas 分成了左右 2 个部分,左边是动态层 Canvas,右边是静态层 Canvas,可以看到,当书写的时候,只有左边的 Canvas 会有书写的效果,右边的 Canvas 不会有书写的效果,当书写完成后,左边的 Canvas 会将书写的内容绘制到右边的 Canvas 中,然后清空左边的 Canvas 的内容,这样就可以达到书写的效果。

当我们把 2 个 Canvas 整合在一起后,具体的效果如下

具体代码

传送门

相关推荐
mCell11 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip11 小时前
Node.js 子进程:child_process
前端·javascript
excel14 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼17 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping17 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙18 小时前
[译] Composition in CSS
前端·css
白水清风18 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix18 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780018 小时前
new、原型和原型链浅析
前端·javascript