canvas类库开发基础

这个专栏目标实现一个自给自足的canvas项目,先造轮子,类似于fabric.js,然后用我们自己的轮子封装一个上层应用,类似于实时通信共享的画板excalidraw!! 下面整理了核心的几个canvas基本概念,如果要造canvas相关的轮子,掌握如下知识是必不可少的。

beginPath

我的这篇文章中"理解基于状态的绘图"部分有详解,总结来说就是stroke绘制的图形是基于与上一个beginPath之间的所有路径进行绘制的。

所以ctx.beginPath()调用的最佳实践应该是绘制完成(完成了画线或者填充)一部分之后,开始绘制下一部分之前都调用。

变换

  • ctx.scale:针对坐标轴的刻度间距进行缩放,默认情况下坐标轴方向上刻度间距等于一个canvas像素的大小,如果ctx.scale(2, 2)之后,刻度间距变为原来的两倍,原本处于画布中心的点移动到了画布的右下角。
  • ctx.translate:移动坐标轴,默认情况下canvas的坐标轴原点处于画布的左上角。ctx.translate(150, 150)的含义就是坐标轴移动至(150, 150),基于这个移动,我们画一个正方形并指定正方形的左上角为(0, 0)会发现,正方形的左上角位于(150, 150),因为fillRect等一系列绘制api的位置参数都是基于坐标轴的。
  • ctx.rotate:顺时针旋转坐标轴,默认情况下坐标原点向右为x,向下为y。ctx.rotate(Math.PI)执行之后,坐标原点向左为x方向,向上为y方向。

绘制上下文缓存

ctx.save()方法可以将当前的绘制上下文入栈存储,当调用ctx.restore()时栈顶的绘制上下文将出栈并生效。

绘制上下文包括当前ctx的所有设置,包括上述三种变换,以及fillStyle等属性的设置。

如下:

javascript 复制代码
let canvas = document.getElementById('canvas');
canvas.width = 300 * devicePixelRatio;
canvas.height = 300 * devicePixelRatio;
canvas.style.width = '300px';
canvas.style.height = '300px';
canvas.style.border = '1px solid red';
const ctx = canvas.getContext('2d');
​
ctx.save();
​
ctx.scale(devicePixelRatio, devicePixelRatio);
ctx.translate(150, 150);
ctx.rotate(Math.PI);
ctx.fillStyle = 'red';
​
ctx.restore();
ctx.fillRect(0, 0, 150, 150);

如上ctx创建之后就通过ctx.save保存了上下文(默认的绘制配置入栈),然后开启了一个新的上下文,我们基于这个新的上下文进行后续的操作,然后下面进行的三种变换,以及修改fillStyle都是在最新的上下文中进行的,但是在真正绘制矩形之前调用了ctx.restore(),导致默认上下文出栈取代当前的上下文,所以最后的矩形绘制出来没有任何特效。

创建高清canvas

demo

创建300px * 300px的高清canvas:

javascript 复制代码
let canvas = document.getElementById('canvas');
canvas.width = 300 * devicePixelRatio;
canvas.height = 300 * devicePixelRatio;
canvas.style.width = '300px';
canvas.style.height = '300px';
canvas.style.border = '1px solid red';
const ctx = canvas.getContext('2d');
ctx.scale(devicePixelRatio, devicePixelRatio);
ctx.fillStyle = 'red'
ctx.fillRect(0, 0, 300, 300);

解析

让一个物理像素对应一个canvas像素进行绘制,也就是位图高清的原理。

如上,我们 300px * 300px 的区域实际上有 (300 * devicePixelRatio) * (300 * devicePixelRatio)个物理像素来负责这一部分的渲染,所以我们申请canvas的像素(canvas.width / canvas.height)为 300 * devicePixelRatio个,也就是与物理像素一样多。然后通过canvas的样式属性将这些canvas像素限制在 300px * 300px 的区域内,至此,我们就做到了这个 300px * 300px 的区域内部1个物理像素渲染一个canvas像素。

但为了方便开发,我们想做到canvas绘制时相关api的位置信息与css像素一一对应,如上例中,我们希望canvas绘制时 (300, 300)这个点就在canvas画布的右下角,所以我们再通过ctx.scale(devicePixelRatio, devicePixelRatio);修改坐标轴的刻度长度,让刻度变为原来的devicePixelRatio倍。举个例子,devicePixelRatio 等于2时,我们在 300px * 300px的区域上申请了 600 * 600 的canvas像素,所以绘制时 (300, 300)的坐标点在画布的中心而非右下,我们通过ctx.scale(2, 2)将x轴与y轴的坐标长度(刻度间隔)扩大2倍,这样 (300, 300)这个坐标点就是画布的右下角了,这一步变换也就保证了canvas绘制时的坐标与css坐标统一。

相关推荐
海底火旺几秒前
JavaScript中的“先有鸡还是先有蛋”——变量提升的奥秘
前端·javascript
LaoZhangAI几秒前
【2025最新】Cherry Studio集成GPT-4o API完全指南:8大步骤实现高效智能绘画
前端
the_flash1 分钟前
JS拖动的原理
前端·javascript
_一条咸鱼_1 分钟前
Vue 教程路由模块之路由守卫深度剖析(六)
前端
菜心881 分钟前
Kotlin 之 when 表达式
前端
前端三叶草2 分钟前
静态分析:现代前端脚手架路由梳理
前端·前端框架
DevUI团队10 分钟前
通过DeepSeek学CSS - Flex和Grid布局优缺点对比
前端·deepseek
这里有鱼汤11 分钟前
做量化没有实时数据怎么行?我找到一个超级好用的Python库,速度还贼快!
前端·后端·python
zhu128930355615 分钟前
基于Rust与WebAssembly实现高性能前端计算
前端·rust·wasm
耶啵奶膘15 分钟前
uni-app:firstUI框架的选择器Select改造,添加一个搜索的插槽
前端·uni-app