canvas

最近对 canvas 绘图产生了点兴趣，工作中偶尔会用到一点 canvas，但是不多。空闲时间折腾了点东西，顺便写个笔记记录一下，在这之前并没有了解过 canvas 引擎相关的技术原理，只是工作中接触过 pixi.js 的部分 API。 所以这里纯粹是个人的折腾笔记。 一、Canvas 知识要点 canvas 是 HTML5 的一个特性，提供了一系列 Javascript 接口来进行图形的绘制，它除了支持 js 2d 的绘制，还支持 WebGL 3D 渲染。想要 canvas 用的溜，基础知识得搞定，有几个点我前前后后折腾过几次，总是记不住，或许写下来，就变得通透了。 模糊问题 如果是第一次开发 canvas ，基本上都会遇到图像模糊的问题，比如下图中的圆边缘看起来有些模糊 这个模糊问题通常是由于设备的 DPR 大于 1 导致的，在 DPR = 1 的设备中，1个逻辑像素由一个物理像素绘制，但是 DPR = 2 的设备中，1个逻辑像素将绘制到2个物理像素中，相当于把图形放大了一倍，所以看起来会模糊。 要解决这个问题，了解了 DPR 后，还需要了解两个知识点：画布宽高和样式宽高。 画布宽高为 canvas 标签中设置的宽高，如 <canvas width=“600” height=“300></canvas> ，样式宽高则是 css 样式中指定的宽高。 画布宽高定义了画布的真实尺寸，而样式宽高则是画布最终展现出来的尺寸，两者如果比例不一致，则会出现图像拉伸变形的情况。 前面说的模糊问题可以理解为图形被放大了 DPR 倍，那缩小回来即可，先将画布尺寸设置为样式尺寸的 DPR 倍 此时可以看到图形已经变得清晰了，但是位置和大小似乎和预期的不一致，解决这个问题，还需要设置一个缩放比例 ctx.scale(DPR, DPR) 模糊的问题到这里大概可以告一段落了，至少知道了该如何解决。 动画 canvas 的动画实现为帧动画，在每一帧中都需要去重绘整个画布，当然也可以设计局部重绘的方案，不过局部重绘在进行 diff 的阶段的开销很可能会大于全量重绘，复杂度也会提升几个量级。...

canvas 是一个可以使用 Javascript 来绘制内容的 HTML 元素。相信大多数人都对 canvas 有一些了解，我们经常用它开发一些动画，也有人用它来开发游戏、画板等应用，或者用来做一些简单的图像处理。 除了这些场景外，还可以用它来进行视频处理，视频就是图像集合按照时间顺序排列起来的，canvas 既然能处理图像，那肯定也能处理视频。 canvas 的基本用法 要在 canvas 中绘制内容，我们得先有一个 canvas，然后在 js 中获取 canvas 的上下文并使用上下文提供的 API 进行绘制 <canvas id="canvas" width="1280" height="720" style="width: 640px; height: 360px; border: 1px solid #ddd"> 很遗憾，你的浏览器不支持 canvas </canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 获取上下文 ctx.scale(2, 2); ctx.fillStyle = 'red'; // 设置填充颜色 ctx.beginPath(); // 开始一个路径 ctx.arc(50, 50, 20, 0, Math.PI * 2); // 圈出一个圆形区域 ctx.fill(); // 填充这个圆形 ctx....