- 博客(79)
- 问答 (1)
- 收藏
- 关注
RSS订阅转载 【面向对象】2. 原型与原型链的举例理解
JavaScript 中大多数情况下都是面向过程编程的，但是也有面向对象编程的情况。那么我们知道面向过程和面向对象这两种编程思想的区别吗？(1)面向过程编程面向过程编程（Procedural Programming）是一种编程范式，它强调程序的执行流程，通过一系列函数或过程的调用来完成任务。面向过程编程以“如何做”为核心，将问题分解成一系列步骤，每个步骤由一个函数或过程来实现。关注解决问题的步骤和过程。程序由一系列顺序执行的函数或过程组成。数据和函数相对独立，函数主要对操作的数据进行处理。
2025-06-10 17:37:19
20
原创 【面向对象】1. 原型与原型链的概念
在 JavaScript 中，每个对象（除了null）都有一个与之关联的原型（prototype）对象。原型对象也是一个对象，它包含可以由特定对象共享的属性和方法。当我们试图访问一个对象的属性时，如果该对象自身没有这个属性，那么 JavaScript 引擎会去该对象的原型上查找，如果原型对象上也没有，那么就会去原型的原型上查找，如此层层向上，直到找到一个匹配的属性或到达原型链的末端（null）。这种查找机制所形成的链式结构被称为原型链。
2025-06-10 15:44:58
844
原创 【第5章 动画】5.1 动画循环
在 Canvas 中实现动画效果很简单：只需要在播放动画时持续更新并绘制就行了，这种持续的更新与重绘就叫做“动画循环”（animation loop），它是所有动画的核心逻辑。我们看看它的工作原理吧。动画是一种持续的循环，但是我们却无法实现这种持续循环，至少我们还不能运用于浏览器中的 JavaScript 代码来实现传统意义上的持续循环。比如说程序清单 5-1 所列出的这段代码，在语法上是正确的，但是无论用多么强大的浏览器去运行它，都会导致浏览器失去响应。
2025-06-10 11:06:11
1009
原创 【第4章 图像与视频】4.5 操作图像的像素
getImageData() 与 putImageData() 这两个方法分别用来获取图像的像素信息，以及向图像中插入像素。与此同时，如果有需要，也可以修改像素的值，所以说，这两个方法能够让开发展对图像之中的像素进行任何可以想见的操作。属性描述width返回 ImageData 对象的宽度height返回 ImageData 对象的高度data返回一个对象，其包含指定的 ImageData 对象的图像数据方法描述创建新的、空白的 ImageData 对象。
2025-05-29 16:13:40
897
原创 【第4章 图像与视频】4.4 离屏 canvas
在 Canvas 开发中，我们经常需要处理复杂的图形和动画，这些操作可能会影响页面的性能和用户体验。为了解决这个问题，现代浏览器引入了 OffscreenCanvas 接口，它允许我们在后台线程（Web Workers）中进行画布操作，从而提高性能和响应速度。
2025-05-29 15:19:30
654
原创 【第4章 图像与视频】4.2 图像的缩放
在上节中读者已经学会了如何使用 drawImage() 方法将一幅未经缩放的图像绘制到 canvas 之中。现在我们就来看看如何用该方法在绘制图像的时候进行缩放。
2025-05-29 12:00:32
1152
原创 【第4章 图像与视频】4.1 图像的绘制
drawImage() 方法可以将一幅图像的整体或某个部分绘制到 canvas 内的任何位置上，并且允许开发者在绘制过程中对图像进行缩放。也可以将图像绘制在离屏 canvas 中，这样的话就可以对图像进行一些有技巧性地处理了，例如实现图像查看器。
2025-05-29 11:35:45
778
原创 【第3章 文本】3.3 文本的定位
在canvas中使用 strokeText() 或 fillText() 绘制文本时，需要指定所绘文本的 X 和 Y 的坐标，然而，浏览器具体将文本绘制在何处，则要看 textAlign 和 textBaseline 这两个属性。应用程序中的实心矩形表示传递给 fillText() 方法的 X 与 Y 坐标，显示的每个字符串都表示了一种 textAlign 与 textBaseline 属性值的组合。textAligntextAlign 属性默认值是 start，它对应了基于 X 的位置，类似于“向初始
2025-05-29 10:57:24
973
原创 【第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
588
原创 【第3章 文本】3.1 文本的描边与填充
Canvas 绘图环境对象提供了与文本有关的3个方法和3个属性。下面应用程序演示了文本的描边与填充效果，该应用程序提供了一些复选框，让用户可以通过它们来控制是否要对所绘文本进行描边、填充及运用阴影效果。示例-使用渐变色及图案来填充文本
2025-05-29 09:29:05
981
原创 【第2章 绘制】2.15 剪辑区
clip()方法用于将当前或给定路径转换为当前裁剪区域。前面的裁剪区域（如果有的话）将与当前路径或给定路径相交，从而创建新的裁剪区域。备注：请注意，裁剪区域仅由添加到路径中的形状构成。它不适用于直接绘制到画布上的形状基元，比如 fillRect()。相反，在调用 clip() 前，你需要使用 rect() 将一个矩形形状添加到路径中。裁剪路径不能直接撤销。在调用 clip() 前，你必须使用 save() 保存画布状态，并在裁剪区域完成绘制后使用 restore() 还原。
2025-05-28 18:59:14
395
原创 【第2章 绘制】2.14 图像合成
在默认情况下，将一个图像绘制在另一个图像之上，那么浏览器会简单地把源物体的图像叠放到目标图像上面。就和 CSS 中的 zIndex 属性效果一样。然而可以通过修改 Canvas 绘图对象的 globalCompositeOperation 属性修改这种默认的叠放，该属性可以取表中所列的任意一个值。目前自己项目中使用默认值就满足需求。
2025-05-28 18:02:10
196
原创 【第2章 绘制】2.13 坐标变换
Canvas 的绘图环境对象提供了两个可以直接操作变换矩阵的方法：transform() 方法用于修改当前的变换矩阵。它接受六个参数：a、b、c、d、e、f，分别对应水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平平移和垂直平移。这个方法不会重置当前的变换矩阵，而是在当前矩阵的基础上进行修改。setTransform() 方法则不同，它会将当前的变换矩阵重置为单位矩阵，然后根据提供的参数（a、b、c、d、e、f）构建一个新的矩阵。
2025-05-28 17:49:21
547
原创 【第2章 绘制】2.11多边形的绘制
现在，我们已经实现全部的基本图形，包括线段、矩形、圆弧、圆形、贝塞尔曲线等等。但是我们肯定要在canvas中绘制除此之外的其他图形，比如三角形、六边形、八边形等等。在本节中，你将绘学到如何绘制多边形。使用 moveTo() 与 lineTo() 方法，再结合一些简单的三角函数，就能绘制任意边数的多边形。下面演示了如何根据多边形外接圆的圆心及半径，来计算某个多边形的顶点。
2025-05-28 16:46:46
703
原创 【第2章 绘制】2.10 贝塞尔曲线
提示：三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。该方法需要三个点：前两个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 moveTo() 进行修改。第一个点是控制点，第二个点是终点。起始点是当前路径最新的点——在创建二次贝赛尔曲线之前，可以使用 moveTo() 方法进行改变。
2025-05-28 16:32:55
278
原创 【第2章 绘制】2.8 线段
Canvas 绘图环境提供了两个可以用来创建线性路径的方法：moveTo() 与 lineTo()。要使线性路径（线段）出现在 canvas 之中，必须在创建路径之后调用 stroke() 方法，这样才可以在 canvas 之中画出两条线段来。不过，如果你仔细看，就会发现有个地方很奇怪。尽管代码在绘制之前已经先将 lineWidth 属性设置成 1 像素了，但是，上边那条线段画出来却是 2 个像素宽。下一小节将解释出现这种现象的原因。一、线段与像素边界如果你在某2个像素的边界处绘制一条 1 像素宽的线
2025-05-28 15:07:16
721
原创 【第2章 绘制】2.7 路径、描边与填充
大多数绘制系统，都是基于路径的。你需要先定义一个路径，然后再对其进行描边或填充，也可以在描边的同时进行填充。
2025-05-28 11:21:44
357
原创 【第2章 绘制】2.6 阴影
shadowColor：CSS3 格式的颜色。shadowOffsetX：从图形或文本到阴影的水平像素偏移。shadowOffsetY：从图形或文本到阴影的垂直像素偏移。shadowBlur：一个与像素无关的值。该值被用于高斯模糊方程之中，以便对阴影进行模糊化处理。指定的 shadowColor 值不是全透明的。在其余的阴影属性之中，存在一个非0的值。
2025-05-28 11:06:16
596
原创 【第2章 绘制】2.4 颜色与透明度
上一节的应用程序使用了默认颜色，也就是不透明的黑色，对矩形进行描边与填充。在实际应用中，肯定会用到其他的颜色，这可以通过绘图环境的 stokeStyle 与 fillStyle 属性来设置。
2025-05-28 10:06:43
282
原创 【第2章 绘制】2.3 矩形的绘制
该应用程序使用 strokeRect() 方法来绘制左边的矩形，使用 fillRect() 方法来绘制右边的矩形，当用户在 canvas 内任意处点击鼠标时，程序调用 clearRect() 方法将整个 canvas 的内容清除。'点击任何处以擦除'
2025-05-28 09:45:52
342
原创 【第2章 绘制】2.2 Canvas 的绘制模型
有时候要使用 Canvas，你得对它有一个很好的理解才行，这包括了 Canvas 究竟是如何绘制图形、图像与文本的。
2025-05-28 09:21:52
229
原创 【第2章 绘制】2.1 坐标系统
在本章及本书的其余部分，读者将会看到：坐标系统的变换是 Canvas 之中一项非常基本的功能，它在很多不同的场合之中都很有用。举例来说，对坐标系统进行变换即移动其原点，可以极大地简化在对图形及文本进行绘制与填充操作时所需的例行数值计算。在默认情况下，Canvas 的坐标系统如下图所示，它以 canvas 的左上角为原点，X 坐标向右方增长，而 Y 坐标则向下方延伸。然而，Canvas 的坐标系统并不是固定的。如下图中所示，可以对坐标系统进行平移及旋转。
2025-05-27 17:49:18
274
原创 【第1章 基础知识】1.10 离屏 canvas
Canvas 技术的另一项重要功能就是可以创建并操作离屏 canvas。举例来说，在大多数情况下，都可以把背景存储在一个或多个离屏 canvas 之中，并将这些离屏 canvas 中的某一部分复制到屏幕上，以此来大幅提高应用程序的性能。离屏 canvas 的另一个用途就是制作我们在上一节提到的那个时钟程序。那个应用程序向你展示了一种通用的解决方案，它需要用户通过交互界面将程序的显示方式从 canvas 切换为图像。不过，像时钟这样的应用程序，最好还是能在不需要用户干预的情况下，于幕后完成显示模式的切换。
2025-05-27 16:59:59
427
原创 【第1章 基础知识】1.9 打印 Canvas 的内容
原文：在默认情况下，canvas 并不是 HTML 的 img 元素，所以，用户不能在 canvas 上通过右击鼠标然后将其保存到磁盘上，也不能将其拖动到桌面上，稍后再打印出来。在现代浏览器上测试后发现，canvas 画布在某些浏览器里是不支持单独打印的，比如safari，但chrome就可以。safari浏览器chrome浏览器。
2025-05-27 16:39:19
331
原创 【第1章 基础知识】1.8 在 Canvas 中使用 HTML 元素
尽管我们可以说 Canvas 是 HTML5 之中最棒的功能，不过在实现网络应用程序时，很少会单独使用它。在绝大多数情况下，你都会将一个或更多的 canvas 元素与其他 HTML 控件结合起来使用，以便让用户可以通过输入数值或其他方式来控制应用程序。要将其他 HTML 控件与 canvas 结合起来使用，首先想到的办法可能是将控件嵌入到 canvas 元素之中。不过这么多不行，因为任何放入 canvas 元素主体部分的东西，只有在浏览器不支持 canvas 元素时，才会被显示出来。浏览器要么显示 canv
2025-05-27 16:06:05
687
原创 【第1章 基础知识】1.7 绘制表面的保存与恢复
Canvas 绘制环境对象的另外一个关键功能就是可以对绘图表面自身进行保存与恢复。这种绘制表面的保存与恢复功能，可以让开发者在绘图表面上进行一些临时性地绘制动作，比如绘制橡皮带线条、辅助线或注解。
2025-05-27 15:38:34
215
原创 【第1章 基础知识】1.6 事件处理
HTML5 应用程序是以事件来驱动的。可以在 HTML 元素上注册事件监听器，并编写用于响应这些事件的实现代码。几乎所有基于 Canvas 的应用程序都会处理鼠标或触摸事件，还有许多程序也会处理其他各种类型的事件，比如键盘事件或拖放事件。
2025-05-27 14:57:41
701
原创 【第1章 基础知识】1.5 基本的绘制操作
为了让读者熟悉一下 Canvas 所提供的绘图 API方法，所以咱们先来看看下面这个时钟程序。该时钟的效果如下图：该时钟的代码用到了如下的 Canvas 绘图 API：
2025-05-27 13:36:30
845
原创 【第1章 基础知识】1.4 开始学习HTML5
本节将简述 HTML5 开发环境，包括了运行应用程序所用的浏览器，以及诸如性能分析器（profiler）、时间轴（timeline）等开发过程中经常用到的开发工具。你可以先略读本节，稍后有需要时再来参考它。
2025-05-27 12:09:43
819
原创 【第1章 基础知识】1.2 Canvas 的绘图环境
canvas 元素仅仅是为了充当绘图环境对象的容器而存在，该环境对象提供了全部的绘制功能。本书暂时只关注 2d 绘图环境，在 JavaScript 代码中，很少会用到 canvas 元素本身，除了会通过它来获取 canvas 的宽度、高度和绘图环境对象。
2025-05-27 11:21:52
391
原创 【第1章 基础知识】1.1 Canvas 元素
新工作需要从事canvas图形化开发，现在将自己从零开始入门的过程记录下来。第一阶段研读了《HTML5 Canvas核心技术 图形、动画与游戏开发》这本书，全面讲解了Canvas元素的各种功能特性，以及如何利用Canvas进行图形绘制、动画制作、游戏开发、自定义空间制作和移动应用开发，包含大量实例，可操作性极强。另外本书是2013年发版的，随着canvas标准的更新，一些新特性书中并没有讲解到，可以配合canvas官网查漏补缺。
2025-05-27 10:47:28
890
原创 vue3项目执行pnpm update后还原package.json文件后运行报错
vue官方版本已更新到vue3.5，项目中还在使用vue3.4，因此想要更新项目vue版本。
2024-09-29 09:42:08
797
翻译 Vue3.5新特性学习
2024 年 9 月 3 日，Vue 官方团队发布了 Vue.js 3.5 稳定版，该版本没有引入任何破坏性变更，但包含了一些内部改进和有用的新特性。让我们一起来探索这些有趣的变化。
2024-09-27 09:51:09
268
1转载 [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique.....
代码】[antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique.....
2022-08-05 10:26:47
489
空空如也
three.js中使用CSS2DObject创建的标签，能绑定点击事件吗，怎么实现？
2022-01-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人