HTML5 Canvas详解：径向渐变与图形绘制

"这篇资源主要介绍了HTML5 Canvas的径向渐变示例和Canvas的基础知识，包括如何创建径向渐变、Canvas元素的基本属性以及如何放置Canvas。" HTML5 Canvas是一个强大的图形绘制工具，允许开发者通过JavaScript在网页上进行动态图形绘制。在本示例中，我们关注的是径向渐变的创建和应用。 径向渐变的创建是通过`createRadialGradient()`方法实现的。在提供的代码中： ```javascript var radgrad = ctx.createRadialGradient(75,75,1,75,75,60); ``` 这个方法接收6个参数，分别是两个圆的中心点坐标和半径：`(圆一圆心x，圆一圆心y，圆一半径，圆2圆心x，圆2圆心y，圆2半径)`。在这个例子中，两个圆心相同（75, 75），但半径不同，从1像素扩大到60像素，形成一个从中心向外扩散的径向渐变效果。 接着，我们通过`addColorStop()`方法定义颜色在渐变中的分布： ```javascript radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); ``` 这些颜色停止点定义了颜色在渐变中的位置，`0`表示起点，`1`表示终点，`0.9`则表示在渐变中的某个中间位置。颜色由亮绿色（#A7D30C）开始，逐渐过渡到深绿色（#019F62），最后在终点变为完全透明（rgba(1,159,98,0)）。 然后，将创建的渐变设置为填充样式： ```javascript ctx.fillStyle = radgrad; ``` 最后，使用`fillRect()`方法绘制一个填充了径向渐变的矩形： ```javascript ctx.fillRect(0,0,150,150); ``` 这将在Canvas上画出一个150x150像素的矩形，其内部填充了之前定义的径向渐变。 除了径向渐变，资源还提到了Canvas的基础知识。Canvas元素本身是一个没有源（src）和替换文本（alt）的图形容器，它的宽度和高度可以通过属性或CSS设置。如果不指定尺寸，Canvas默认为300x150像素。尽管可以通过CSS改变Canvas的大小，但实际绘制的图像会被缩放以适应布局。 为了在Canvas上进行绘图，我们需要通过JavaScript获取其2D渲染上下文（`ctx = canvas.getContext("2d")`）。一旦获取到上下文，就可以使用各种方法如`fillRect()`, `strokeRect()`, `drawImage()`等进行图形绘制。 此外，资源还提到了Canvas的其他功能，如保存和恢复绘图状态，保存文件，获取像素信息，以及基本的动画制作。这些功能让Canvas成为一个强大的工具，能够实现复杂的交互式图形和动画效果。