- 博客(99)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 【总结】暂序
目前项目业务是使用 canvas 对数据进行成图，不涉及动画游戏业务，《HTML5 Canvas核心技术 图形、动画与游戏开发》这本书总共有10章，目前只用看到【第5章-动画】章节，目前笔记就先记录到这。
2025-07-10 09:50:42
293
原创 【1-快速上手】
结合项目实际业务需求，在 Fabric、Konva 等图形化框架中，我选择了性能表现好的 Konva。Konva 官网GithubKonva 中文文档我是在豆包的浏览器中打开 Konva 官网，其自带全文翻译功能，可以快速查看中文内容。Konva 是一个 HTML5 画布 JavaScript 框架，它通过为桌面和移动应用程序实现画布交互性来扩展 2D 上下文。Konva 可为桌面和移动应用程序实现高性能动画、过渡效果、节点嵌套、分层、过滤、缓存、事件处理等诸多功能。
2025-07-08 18:49:03
1039
原创 【第5章 动画】5.11 动画制作的最佳指导原则
对于大多数动画来说，哪怕应用程序运行得再慢，我们都要保证动画能够以平稳的速度播放，在制作游戏时尤其要注意这一点。离屏缓冲区则是很有用的，我们经常在程序中使用一个或更多的离屏缓冲区，尤其在绘制复杂动画背景时更是如此。在其余因素都相同的情况下，从离屏缓冲区中复制图像到屏幕上，与直接重绘每帧动画的背景相比，绘制效率要更高一些。最后要说的是，在播放动画时，应该避免分配内存。将运动物体的更新逻辑与这些物体的绘制分开来做也是个好办法，因为如果在绘制的同时修改运行物体的属性，则有可能干扰动画的播放。
2025-07-08 14:23:50
213
原创 【第5章 动画】5.9 用户手势
有些动画可以自行播放，而另一些则需要用户参与互动。在桌面电脑和移动设备上，用户通常会以鼠标或手指触摸来与动画互动，这些方式就叫用户手势。下面应用程序中，用户可以通过快速拖拽并松开鼠标的方式把放大镜“扔”出去，放大镜扔出去之后，就会沿着刚才拖拽鼠标的方向继续移动。
2025-07-08 13:40:41
207
原创 【第5章 动画】5.8 视差动画
上面的动画中，从远到近，有天空、小树、大树、草地，物体的移动速度依次变快。动画制作者让各个动画图层以不同的速度滚动，这样就实现了视差效果。从不同的位置，以不同的视线来观察同一个物体时，就会产生视差。这也是远处物体看上去好像比近处物体移动速度更慢的原因。小结：了解视差动画是什么，下面的代码示例不用深究，实际项目中遇到再去考虑。
2025-07-08 13:23:59
176
原创 【第5章 动画】5.7 背景的滚动
在本例中，起初位于屏幕外的那张背景图像，与一开始就显示在屏幕中的那张图是一样的。然而，不是非得这样才行，只要相邻两张图像的交界处内容相同就可以。只要图像边界处能吻合，那么不管背景的其余内容怎么变化，我们都可以实现一幅平滑滚动的背景。应用程序在绘制动画的每一帧时，都会把云彩图像画在相同的坐标点上，然而由于程序平移了绘图环境对象的原点坐标，所有看起来云彩好像正在从右向左移动。下面应用程序实现了流动的云彩作为背景，可以用作某款横向卷轴电子游戏的背景。
2025-07-08 11:11:47
203
原创 【第5章 动画】5.6 基于时间的运动
假设在多人射击游戏中有两个玩家各自沿着某条走廊前行，如果保持行进速度不变，那么他们将同时到达走廊的交汇处。若是由于某玩家的电脑配置比另一人好得多，而导致其电脑播放游戏动画的速度更快，那么玩家们就不会再和比自己电脑配置高的人玩了，因为他们总是能提前到达目的地。想让动画以稳定的速度运行，而不受帧速率的影响，那就要根据物体的速度计算出它在两帧之间所移动的像素数。不论底层的帧速率如何，动画都应以稳定的速度播放才对。
2025-07-08 09:16:15
263
原创 【第5章 动画】5.5 利用双缓冲技术绘制动画
书中有一段话可能不对，“双缓存技术可以有效地消除动画绘制时的闪烁，所以浏览器会自动采用双缓冲来实现 canvas 元素”。网上查询和 ai 智能查询，浏览器并不会自动采用双缓冲技术，而是使用单次刷新特性。
2025-07-07 19:15:00
419
原创 【bat脚本】基本语法入门
定义变量（等号前后无空格）使用变量（%包裹）推荐加引号避免空格问题set age=清空变量set /a n=0定义数字变量，/a 表示将右侧赋值内容按算术表达式处理。若省略 /a，set n=0 会将 n 存储为字符串类型；而使用 /a 后，n 会被存储为数值类型（此处为整数 0）。chcp 65001@echo off:: 定义数字变量set /a n=0:: 定义字符串变量:: 定义数组变量echo %%a)):: 提示用户输入他们的名字。
2025-07-07 16:44:11
847
原创 vscode中对node项目进行断点调试
选择【Node.js】，就会在项目根目录下的 .vscode 中生成 launch.json 文件。点击左侧的【运行和调试】图标。点击【添加配置】按钮。
2025-07-04 11:49:25
294
原创 【第5章 动画】5.4 恢复动画背景
实现动画效果所用的大多数技术都比较简单，例如借助 requestAnimationFrame（），每隔一段时间就调用一次自定义的 animate（）方法，还有就是根据动画内容计算出运动物体下一次的位置，并将其绘制到新坐标处，这个做起来也很容易。绘制动画时具有挑战性的环节在于如何处理背景。将所有内容都擦除，并重新绘制。仅重绘内容发生变化的那部分区域。从离屏缓冲区中将内容发生变化的那部分背景图像复制到屏幕上。小技巧：是否要把每帧动画的所有内容都重绘一遍？
2025-07-03 10:16:24
470
原创 解决 npm install [email protected] 失败的问题
项目中使用了canvasnpm包来实现 node 服务端数据成图的功能。但是在项目中使用安装失败，经过各种和 AI 沟通的尝试后，终于 指定版本的 canvas 安装成功，项目也运行成功，在此记录一下安装方法。
2025-07-02 17:11:00
481
原创 【第5章 动画】5.3 以不同的帧速率来执行各种任务
很多动画程序在播放动画时还要执行其他任务。关键逻辑：animate 动画中还是会每帧计算一次 FPS 值，但是使用 lastUpdateTime 记录上次更新画布的时间，让更新画布的操作会每秒才执行一次。下面列出了范例程序的动画循环，该循环会根据上一次更新 fps 数值的时间来判断当前是否已经过了一秒钟，如果是的话，那么就再次更新 fps 数值。这也就意味着，不论动画的帧速率是多少，“在画布上更新动画帧速率数值” 的这个任务，其运行速度总是每秒 1 帧，不必与动画播放的速度一致。// 每帧计算FPS。
2025-06-27 09:53:03
384
原创 【2-入门与调试设置】1.坐标辅助器与轨道控制器
快速入门开发三维场景时，坐标辅助器和轨道控制器是关键工具。坐标辅助器通过线段形式显示世界坐标系，帮助开发者明确物体位置。而轨道控制器则通过监听页面事件，如鼠标滚轮和滑动，控制相机旋转、缩放和平移，并可实现带阻尼的平滑运动。此外，控制器支持自定义属性，如自动旋转和监听事件对象，以更灵活地控制三维场景。
2025-06-26 19:09:53
316
原创 【1-认识three.js与开发环境搭建】
在 web 三维开发场景中，Three.js是使用最多的 3D 引擎库，当前Manual 入门手册：为新手介绍了一些入门知识，优先查看。Examples 示例：包含了很多官方demo，做类似功能时查看相关 api 的用法。Docs 文档：详细说明了 three.js 对外提供的每个 class 类的属性和方法。
2025-06-26 17:31:53
555
原创 【第5章 动画】5.2 帧速率的计算
动画是由一系列叫做“帧”（frame）的图像组成的，这些图像的显示频率就叫做“帧速率”（frame rate）。在实现“基于时间的运动”效果时，可能会用到动画的帧速率，或是有时为了保证动画能够播放得足够流畅，我们也需要知道动画的帧速率。应用程序的代码将上次绘制动画帧的时间从当前时间中减去，得到了这两帧动画的时间差，然后再用 1000 除以这个以毫秒为单位的时间差，于是就得出了动画每秒钟播放的帧数，也就是其帧速率。// 计算当前帧的瞬时FPS值(1000ms/帧间隔时间)// 取10帧的平均值。
2025-06-26 16:41:15
940
转载 【ES6】1. let和const命令
目前前端工作转为图形化开发，不再需要去使用vue或react等框架，更多的是使用canvas和原生js等技术进行图形化开发，所以需要巩固下基础的js知识，包括es6的知识。ECMAScript 6 入门。
2025-06-20 10:39:37
41
原创 【面向对象】3. Class类的基本语法
在 Canvas 项目中我们一般是使用面向对象的方式进行开发的，因此我们需要全面了解面向对象 class 类的使用。为此我通过阮一峰 ECMScript 6 入门中的 class 基本语法和继承进行学习。为了更好的实现面向对象编程，降低代码的冗余度，es6 推出了 class 类的概念。他实际上是一种语法糖，本质上利用的还是原型和构造函数的概念。Class 可以通过extends关键字实现继承，让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承，要清晰和方便很多。
2025-06-16 09:50:21
643
转载 【面向对象】2. 原型与原型链的举例理解
JavaScript 中大多数情况下都是面向过程编程的，但是也有面向对象编程的情况。那么我们知道面向过程和面向对象这两种编程思想的区别吗？(1)面向过程编程面向过程编程（Procedural Programming）是一种编程范式，它强调程序的执行流程，通过一系列函数或过程的调用来完成任务。面向过程编程以“如何做”为核心，将问题分解成一系列步骤，每个步骤由一个函数或过程来实现。关注解决问题的步骤和过程。程序由一系列顺序执行的函数或过程组成。数据和函数相对独立，函数主要对操作的数据进行处理。
2025-06-10 17:37:19
38
原创 【面向对象】1. 原型与原型链的概念
在 JavaScript 中，每个对象（除了null）都有一个与之关联的原型（prototype）对象。原型对象也是一个对象，它包含可以由特定对象共享的属性和方法。当我们试图访问一个对象的属性时，如果该对象自身没有这个属性，那么 JavaScript 引擎会去该对象的原型上查找，如果原型对象上也没有，那么就会去原型的原型上查找，如此层层向上，直到找到一个匹配的属性或到达原型链的末端（null）。这种查找机制所形成的链式结构被称为原型链。
2025-06-10 15:44:58
909
原创 【第5章 动画】5.1 动画循环
在 Canvas 中实现动画效果很简单：只需要在播放动画时持续更新并绘制就行了，这种持续的更新与重绘就叫做“动画循环”（animation loop），它是所有动画的核心逻辑。我们看看它的工作原理吧。动画是一种持续的循环，但是我们却无法实现这种持续循环，至少我们还不能运用于浏览器中的 JavaScript 代码来实现传统意义上的持续循环。比如说程序清单 5-1 所列出的这段代码，在语法上是正确的，但是无论用多么强大的浏览器去运行它，都会导致浏览器失去响应。
2025-06-10 11:06:11
1044
原创 【第4章 图像与视频】4.5 操作图像的像素
getImageData() 与 putImageData() 这两个方法分别用来获取图像的像素信息，以及向图像中插入像素。与此同时，如果有需要，也可以修改像素的值，所以说，这两个方法能够让开发展对图像之中的像素进行任何可以想见的操作。属性描述width返回 ImageData 对象的宽度height返回 ImageData 对象的高度data返回一个对象，其包含指定的 ImageData 对象的图像数据方法描述创建新的、空白的 ImageData 对象。
2025-05-29 16:13:40
920
原创 【第4章 图像与视频】4.4 离屏 canvas
在 Canvas 开发中，我们经常需要处理复杂的图形和动画，这些操作可能会影响页面的性能和用户体验。为了解决这个问题，现代浏览器引入了 OffscreenCanvas 接口，它允许我们在后台线程（Web Workers）中进行画布操作，从而提高性能和响应速度。
2025-05-29 15:19:30
716
原创 【第4章 图像与视频】4.2 图像的缩放
在上节中读者已经学会了如何使用 drawImage() 方法将一幅未经缩放的图像绘制到 canvas 之中。现在我们就来看看如何用该方法在绘制图像的时候进行缩放。
2025-05-29 12:00:32
1170
原创 【第4章 图像与视频】4.1 图像的绘制
drawImage() 方法可以将一幅图像的整体或某个部分绘制到 canvas 内的任何位置上，并且允许开发者在绘制过程中对图像进行缩放。也可以将图像绘制在离屏 canvas 中，这样的话就可以对图像进行一些有技巧性地处理了，例如实现图像查看器。
2025-05-29 11:35:45
800
原创 【第3章 文本】3.3 文本的定位
在canvas中使用 strokeText() 或 fillText() 绘制文本时，需要指定所绘文本的 X 和 Y 的坐标，然而，浏览器具体将文本绘制在何处，则要看 textAlign 和 textBaseline 这两个属性。应用程序中的实心矩形表示传递给 fillText() 方法的 X 与 Y 坐标，显示的每个字符串都表示了一种 textAlign 与 textBaseline 属性值的组合。textAligntextAlign 属性默认值是 start，它对应了基于 X 的位置，类似于“向初始
2025-05-29 10:57:24
998
原创 【第3章 文本】3.2 设置字型属性
在 Canvas 中，可以通过绘图环境对象的 font 属性设置文本所采用的字型。该属性是一个 CSS3 格式的字型字符串，各个分量如下表所示，在设置font属性时，需要从上到下一次制定这些分量的值。Canvas 默认字型是 10px sans-serif。font-style、font-variant、font-weidht的默认值均为normal。字型属性分量描述font-style规定字体样式。可能的值：normal、italic、oblique规定字体变体。
2025-05-29 10:15:04
618
原创 【第3章 文本】3.1 文本的描边与填充
Canvas 绘图环境对象提供了与文本有关的3个方法和3个属性。下面应用程序演示了文本的描边与填充效果，该应用程序提供了一些复选框，让用户可以通过它们来控制是否要对所绘文本进行描边、填充及运用阴影效果。示例-使用渐变色及图案来填充文本
2025-05-29 09:29:05
1006
原创 【第2章 绘制】2.15 剪辑区
clip()方法用于将当前或给定路径转换为当前裁剪区域。前面的裁剪区域（如果有的话）将与当前路径或给定路径相交，从而创建新的裁剪区域。备注：请注意，裁剪区域仅由添加到路径中的形状构成。它不适用于直接绘制到画布上的形状基元，比如 fillRect()。相反，在调用 clip() 前，你需要使用 rect() 将一个矩形形状添加到路径中。裁剪路径不能直接撤销。在调用 clip() 前，你必须使用 save() 保存画布状态，并在裁剪区域完成绘制后使用 restore() 还原。
2025-05-28 18:59:14
412
原创 【第2章 绘制】2.14 图像合成
在默认情况下，将一个图像绘制在另一个图像之上，那么浏览器会简单地把源物体的图像叠放到目标图像上面。就和 CSS 中的 zIndex 属性效果一样。然而可以通过修改 Canvas 绘图对象的 globalCompositeOperation 属性修改这种默认的叠放，该属性可以取表中所列的任意一个值。目前自己项目中使用默认值就满足需求。
2025-05-28 18:02:10
210
原创 【第2章 绘制】2.13 坐标变换
Canvas 的绘图环境对象提供了两个可以直接操作变换矩阵的方法：transform() 方法用于修改当前的变换矩阵。它接受六个参数：a、b、c、d、e、f，分别对应水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平平移和垂直平移。这个方法不会重置当前的变换矩阵，而是在当前矩阵的基础上进行修改。setTransform() 方法则不同，它会将当前的变换矩阵重置为单位矩阵，然后根据提供的参数（a、b、c、d、e、f）构建一个新的矩阵。
2025-05-28 17:49:21
569
原创 【第2章 绘制】2.11多边形的绘制
现在，我们已经实现全部的基本图形，包括线段、矩形、圆弧、圆形、贝塞尔曲线等等。但是我们肯定要在canvas中绘制除此之外的其他图形，比如三角形、六边形、八边形等等。在本节中，你将绘学到如何绘制多边形。使用 moveTo() 与 lineTo() 方法，再结合一些简单的三角函数，就能绘制任意边数的多边形。下面演示了如何根据多边形外接圆的圆心及半径，来计算某个多边形的顶点。
2025-05-28 16:46:46
723
原创 【第2章 绘制】2.10 贝塞尔曲线
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。该方法需要三个点：前两个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点——在创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。
2025-05-28 16:32:55
294
原创 【第2章 绘制】2.8 线段
Canvas 绘图环境提供了两个可以用来创建线性路径的方法：moveTo() 与 lineTo()。要使线性路径（线段）出现在 canvas 之中，必须在创建路径之后调用 stroke() 方法，这样才可以在 canvas 之中画出两条线段来。不过，如果你仔细看，就会发现有个地方很奇怪。尽管代码在绘制之前已经先将 lineWidth 属性设置成 1 像素了，但是，上边那条线段画出来却是 2 个像素宽。下一小节将解释出现这种现象的原因。一、线段与像素边界如果你在某2个像素的边界处绘制一条 1 像素宽的线
2025-05-28 15:07:16
751
原创 【第2章 绘制】2.7 路径、描边与填充
大多数绘制系统，都是基于路径的。你需要先定义一个路径，然后再对其进行描边或填充，也可以在描边的同时进行填充。
2025-05-28 11:21:44
393
空空如也
three.js中使用CSS2DObject创建的标签，能绑定点击事件吗，怎么实现？
2022-01-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人