createradialgradient 是 canvas 2d api 创建放射渐变对象的方法，需配合 fillstyle/strokestyle 使用，不能直接设置 html 元素 css 背景；其通过两个圆（起始与结束）定义过渡区域，并用 addcolorstop 添加颜色停靠点。
createRadialGradient 是 Canvas 2D 上下文的方法，用于创建放射状渐变对象，再通过 fillStyle 或 strokeStyle 应用到图形上——它本身**不能直接设置 HTML 元素的 CSS 背景**，但可以用来在 <canvas></canvas> 中绘制圆形放射渐变背景。
基本语法与参数含义
调用方式：
const gradient = ctx.createRadialGradient( x0, y0, r0, // 起始圆：圆心坐标 (x0, y0) 和半径 r0 x1, y1, r1 // 结束圆：圆心坐标 (x1, y1) 和半径 r1 );
关键点：
- 两个圆定义了渐变的“起始色”和“结束色”的过渡区域；通常让起始圆很小（如
r0 = 0），结束圆覆盖目标区域（如r1 = 200） - 两个圆心可以不同，实现偏心渐变（比如光从左上角照过来）
- 渐变颜色需用
gradient.addColorStop(offset, color)添加，offset是 0–1 之间的归一化位置
绘制一个居中放射渐变背景的完整示例
假设画布尺寸为 400×300，想画一个从中心发散、白→灰→黑的圆形渐变：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 定义中心点和最大半径（覆盖整个画布对角线的一半更保险）
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const maxRadius = Math.sqrt(centerX**2 + centerY**2); // 或简写为 250
const gradient = ctx.createRadialGradient(
centerX, centerY, 0, // 小圆：中心点，半径 0 → 起始色在此集中
centerX, centerY, maxRadius // 大圆：同中心，半径足够覆盖全画布
);
gradient.addColorStop(0, '#ffffff'); // 中心白色
gradient.addColorStop(0.7, '#cccccc'); // 中间灰色
gradient.addColorStop(1, '#000000'); // 边缘黑色
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height); // 填满整个画布
实现偏心/非对称放射渐变
若要模拟“光源在左上角”的效果，只需把起始圆和结束圆的圆心错开：
- 起始圆设在
(50, 50)（左上区域），r0 = 0 - 结束圆设在
(200, 150)，r1 = 300（更大、略偏右下） - 这样渐变会从 (50,50) 开始扩散，视觉上像光照来源
注意：这不是 CSS background-gradient
HTML5 Canvas 的 createRadialGradient 仅作用于 Canvas 绘图上下文。如果目标是给普通 div 设置放射渐变背景，请使用 CSS：
div {
background: radial-gradient(circle at center, white, gray, black);
}
CSS 的 radial-gradient() 更简洁，支持关键词（circle、ellipse）、位置（at 20% 30%）和颜色列表，无需手动计算坐标和半径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
