【canvas】canvas的基础使用（五）：填充和描边样式

最新推荐文章于 2025-05-13 06:57:14 发布

原创

最新推荐文章于 2025-05-13 06:57:14 发布 · 1.8k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #ecmascript

简言

学习如何设置canvas上下文的填充和描边样式。

前置知识

CanvasGradient 渐变对象

CanvasGradient 接口表示描述渐变的不透明对象。通过 CanvasRenderingContext2D.createLinearGradient() 或 CanvasRenderingContext2D.createRadialGradient() 的返回值得到。

createLinearGradient()线性渐变生成

Canvas 2D API 的 CanvasRenderingContext2D.createLinearGradient() 方法会根据两个给定的坐标值所构成的线段创建一个线性渐变。

该方法返回一个线性 CanvasGradient对象。想要应用这个渐变，需要把这个返回值赋值给 fillStyle 或者 strokeStyle。

语法：
CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1);
参数：

x0 ---- 起点的 x 轴坐标。
y0 — 起点的 y 轴坐标。
x1 — 终点的 x 轴坐标。
y1 — 终点的 y 轴坐标。

返回一个根据指定线路初始化的线性 CanvasGradient 对象。
在这里插入图片描述

createRadialGradient 径向渐变生成

CanvasRenderingContext2D.createRadialGradient() 是 Canvas 2D API 根据参数确定两个圆的坐标，绘制径向渐变的方法。这个方法返回 CanvasGradient。
语法：
CanvasGradient ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
参数：

x0 — 开始圆形的 x 轴坐标。
y0 — 开始圆形的 y 轴坐标。
r0 — 开始圆形的半径。
x1 — 结束圆形的 x 轴坐标。
y1 — 结束圆形的 y 轴坐标。
r1 — 结束圆形的半径。

返回由两个指定的圆初始化的放射性 CanvasGradient 对象。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = ctx.createRadialGradient(110, 90, 30, 100, 100, 70);

// Add three color stops
gradient.addColorStop(0, "pink");
gradient.addColorStop(0.9,