文章编号：1821 / 更新时间：2024-12-30 17:29:21 / 浏览：次

linearGradientBrush 是 Canvas API 中用于创建线性渐变的画笔对象。线性渐变是从起点到终点的颜色过渡效果，其中颜色沿着直线逐渐变化。

语法

var linearGradientBrush = context.createLinearGradient(x0, y0, x1, y1);

• context ：CanvasRenderingContext2D 对象。

• x0, y0 ：渐变起点坐标。
• x1, y1 ：渐变终点坐标。

方法

`addColorStop(offset, color)`在渐变中添加一个颜色停止点。颜色停止点指定渐变中颜色的位置和值。

• offset ：颜色停止点的相对偏移量（0 到 1 之间）。
• color ：颜色停止点的颜色值。

`toJSON()`返回包含渐变属性的对象。

示例

下面的示例在 Canvas 上绘制一个从红色到蓝色的线性渐变：```javascriptvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var gradient = ctx.createLinearGradient(0, 0, canvas.Width, canvas.height);gradient.addColorStop(0, "red");gradient.addColorStop(1, "blue");ctx.fillStyle = gradient;ctx.fillRect(0, 0, canvas.width, canvas.height);```

属性

`x0`渐变起点的 X 坐标。`y0`渐变起点的 Y 坐标。`x1`渐变终点的 X 坐标。`y1`渐变终点的 Y 坐标。

支持

linearGradientBrush 在所有现代浏览器中都得到支持。
相关标签： linearGradientBrush、

本文地址：https://www.qianwe.com/article/76ff8fae0aa603afc3f9.html

上一篇：使用RewriteBase配置URL重写基准目录使用re...
下一篇：Android开发教程android是什么...