HTML5 中怎么用 createLinearGradient 创建线性的渐变填充样式-H5教程-PHP中文网

createlineargradient用于创建线性渐变对象，需指定起点(x0,y0)和终点(x1,y1)，再用addcolorstop添加0～1间偏移的颜色停靠点，最后赋给fillstyle或strokestyle生效。

html5 中怎么用 createlineargradient 创建线性的渐变填充样式

createLinearGradient 是 Canvas 2D 上下文（CanvasRenderingContext2D）提供的方法，用于创建一个线性渐变对象，之后可赋值给 fillStyle 或 strokeStyle，实现图形的渐变填充或描边。

基本用法：定义渐变方向和颜色停靠点

调用格式为：
const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
其中 (x0, y0) 是渐变起点坐标，(x1, y1) 是终点坐标 —— 这两点确定一条直线，颜色将沿该直线方向平滑过渡。

坐标基于画布像素，原点在左上角（0, 0）
起点和终点可以超出画布范围，不影响效果，只影响渐变“方向”和“比例”
创建后需用 gradient.addColorStop(offset, color) 添加至少两个颜色停靠点

添加颜色停靠点：addColorStop

addColorStop 的第一个参数 offset 是 0～1 之间的数值，表示从起点到终点的距离比例：

0 对应起点颜色
1 对应终点颜色
中间值如 0.5 表示中点位置的颜色

例如：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

const grad = ctx.createLinearGradient(0, 0, 200, 100);
grad.addColorStop(0, '#ff9a9e');   // 左上角起始色
grad.addColorStop(0.5, '#fad0c4'); // 中间色
grad.addColorStop(1, '#a1c4fd');   // 右下角结束色
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 200, 100);