wuhen_n的博客

本专栏系统性地介绍了Canvas技术的开发与应用，从基础到进阶，涵盖了图形绘制、颜色填充、路径操作、动画特效、交互设计及性能优化等多个方面。每篇文章均配有代码示例和详细解析，帮助开发者快速掌握Canvas的核心技能。专栏内容包括Canvas的基础知识如矩形、路径、贝塞尔曲线的绘制，以及高级技巧如渐变、阴影、文本操作、图片处理等。

本文介绍如何使用Canvas实现同心圆星轨动画效果。

本文介绍如何使用Canvas技术绘制可交互的射手座星空图。

本文介绍如何使用Canvas技术制作交互式天蝎座星空图。

本文介绍了如何使用Canvas技术实现一个交互式天秤座星空图。

本文介绍了使用Canvas技术绘制交互式处女座星空图的实现方法。

本文介绍了使用Canvas技术绘制交互式狮子座星空图的实现方法。

本文介绍了一个基于Canvas技术实现的巨蟹座星空交互效果。

这篇文章介绍如何使用Canvas技术创建交互式的双子座星空图。

本文介绍了如何使用Canvas技术实现一个交互式金牛座星空图。

本文介绍如何使用Canvas实现3D立体字幕矩阵效果，模拟《黑客帝国》中的数字雨场景。

本文介绍了如何使用Canvas技术实现一个交互式的白羊座星空图。

本文介绍了如何使用Canvas技术实现一个可交互的双鱼座星空图。

在Canvas中，边界检测是确保元素在画布内运动的关键技术。通过实时判断元素与画布边界的位置关系，可以有效防止元素超出画布范围，避免视觉错乱和用户体验的破坏。

本文介绍了三种常见的碰撞检测方法：矩形与矩形（AABB vs AABB）、圆形与圆形（Circle vs Circle）以及矩形与圆形（AABB vs Circle）的碰撞检测。

本文介绍了如何在Canvas中实现粒子动画系统，并以烟花效果为例进行详细讲解。

本文介绍了如何在Canvas中实现鼠标交互动画，重点讲解了获取鼠标坐标和处理鼠标事件的方法。通过getBoundingClientRect()方法，可以将鼠标坐标转换为Canvas画布中的坐标。文章详细展示了如何监听鼠标点击事件，并在点击位置绘制圆形，以及如何通过mousedown、mousemove和mouseup事件实现拖动矩形的功能。

本文详细介绍了在Canvas中实现动画的基本步骤和方法。动画的核心步骤包括清除画布、保存画布状态、绘制动画内容和恢复画布状态。文章还对比了三种常用的动画绘制方法：setInterval()、setTimeout()和requestAnimationFrame()。

本文详细介绍了Canvas中的路径裁剪clip方法，通过定义路径限制绘图区域，使得后续绘图操作仅在指定区域内生效，并对比了clip与globalCompositeOperation的异同。

本文详细介绍了Canvas中的组合（Compositing）功能，通过globalCompositeOperation属性控制新绘制图形与已有内容的叠加方式。

本文主要介绍了Canvas中的四种主要变形操作：移动、旋转、缩放和变形。

本文主要讲解了Canvas绘图中的状态管理，通过save()和restore()方法实现，前者保存当前绘图环境状态（包括变换矩阵、剪切区域、样式属性等）到栈中，后者从栈中恢复最近保存的状态。

在之前的文章中，我们讲述了Canvas中文本操作的方法和属性，本文将讲述Canvas中图片操作方法。本文主要介绍了图片操作方法drawImage以及drawImage的三种重载形式，对于文章中错误的地方或者有任何问题，欢迎在评论区留言分享！

本文详细介绍了Canvas中用于文本操作的四种属性：font、textAlign、textBaseline和direction。font属性用于设置字体样式，包括字体大小、粗细、样式等；textAlign控制文本的水平对齐方式；textBaseline决定文本的垂直对齐方式；direction则设置文本的书写方向，如从左到右或从右到左。

本文详细介绍了Canvas中文本操作的三种方法：fillText()、strokeText()和measureText()。fillText()用于绘制实心文本，strokeText()用于绘制空心文本，两者均支持设置最大宽度以控制文本显示。measureText()则返回一个TextMetrics对象，常用于获取文本宽度以实现水平居中等效果。

本文详细介绍了如何在Canvas中为图形设置阴影效果，主要通过四个关键属性：shadowOffsetX、shadowOffsetY、shadowBlur和shadowColor。shadowOffsetX和shadowOffsetY分别控制阴影在水平和垂直方向上的偏移，正值使阴影向右或向下移动，负值则相反。shadowBlur用于设置阴影的模糊程度，数值越大，阴影越模糊。shadowColor则用于定义阴影的颜色，默认值为透明黑色。

本文详细介绍了Canvas中的createRadialGradient()方法，用于创建径向渐变效果。

本文详细介绍了Canvas中的createLinearGradient()方法，用于创建线性渐变效果。

本文详细介绍了Canvas中用于设置两条线段相交时连接处样式的lineJoin属性及其三种取值：miter（尖角，默认）、round（圆角）和bevel（斜切角），并通过代码示例展示了不同样式的效果。此外，文章还讲解了miterLimit属性的作用，它用于限制尖角的延伸长度，防止斜接部分过长，默认值为10。当斜接长度超过miterLimit与lineWidth的乘积时，交汇处会自动转换为bevel样式。通过代码示例，展示了miterLimit的实际应用效果。

本文详细介绍了如何在Canvas中使用setLineDash()和lineDashOffset来绘制虚线。setLineDash()方法通过数组参数控制虚线的实线和空白部分长度，数组中的偶数索引值代表实线长度，奇数索引值代表空白长度。如果数组长度为奇数，则会自动复制以形成偶数长度。lineDashOffset属性用于设置虚线模式的起始偏移量，正值向左偏移，负值向右偏移。

本文详细介绍了Canvas中lineCap属性的使用，该属性用于设置线条的端点样式，支持butt（默认）、round和square三种值，通过代码示例展示了不同lineCap值的效果。

本文详细介绍了在Canvas中如何使用lineWidth属性设置图形的线条宽度。

本文主要介绍了如何通过`globalAlpha`给图形设置透明度

本文介绍了如何在Canvas中使用 fillStyle 和 strokeStyle 为图形设置颜色样式。fillStyle 用于填充图形内部的颜色，而 strokeStyle 用于绘制图形的边框颜色。

本文主要介绍了Path2D对象,以及Path2D和CTX的简单对比，我们可以通过合理结合两者的优势，在 Canvas 绘图中实现效率与灵活性的平衡。

本文讲解了Canvas中的二次贝塞尔曲线和三次贝塞尔曲线，在数学原理、形状特性和应用场景上的联系与区别，并通过实际案例展示它们的应用方法

本文讲解了如何使用Canvas绘制三次贝塞尔曲线，以及三次贝塞尔曲线的相关内容，包括曲线定义、语法、图形示例和图解。

本文讲解了如何使用Canvas绘制二次贝塞尔曲线，以及二次贝塞尔曲线的相关内容，包括曲线定义、语法、图形示例和图解。

本文主要借助Canvas和JavaScript实现黑客帝国-字母矩阵（字母雨）的效果。

本文主要介绍了Canvas中几种图形的绘制方式，包括直线、圆弧等。