canvas 样式，绘制丰富多彩的图形！

前端

2023-09-26 05:52:06

引言

HTML5 Canvas 是一种强大的绘图技术，它允许你在网页上创建和操作位图图像。Canvas 提供了一系列样式选项，使你可以为你的图形添加颜色、渐变和图案，从而创建出丰富多彩且引人入胜的视觉效果。

图形着色的区域

Canvas 将图形着色的区域划分为两类：填充和描边。填充是指图形内部的区域，而描边是指图形周围的轮廓。

要设置填充样式，可以使用 fillStyle 属性。它接受以下值：

颜色值 ：十六进制代码、RGB 值、HSL 值或 CSS 颜色名称
渐变：通过 createLinearGradient() 或 createRadialGradient() 方法创建
图案：通过 createPattern() 方法创建

要设置描边样式，可以使用 strokeStyle 属性。它接受与 fillStyle 属性相同的值。

图形着色的样式

Canvas 提供了多种样式选项，用于为图形添加颜色和效果：

颜色： 可以通过 fillStyle 和 strokeStyle 属性设置
透明度： 通过 globalAlpha 属性设置，范围从 0（完全透明）到 1（完全不透明）
线宽： 通过 lineWidth 属性设置，单位为像素
线帽： 通过 lineCap 属性设置，可以是 "butt"（平头）、"round"（圆头）或 "square"（方头）
线连接： 通过 lineJoin 属性设置，可以是 "miter"（尖角）、"round"（圆角）或 "bevel"（斜角）

绘制丰富多彩的图形

使用 Canvas 的样式选项，你可以绘制各种丰富多彩的图形，包括：

矩形和圆形： 使用 fillRect()、strokeRect()、fillCircle() 和 strokeCircle() 方法
路径： 使用 beginPath()、moveTo()、lineTo()、quadraticCurveTo() 和 bezierCurveTo() 方法创建复杂形状
文本： 使用 fillText() 和 strokeText() 方法
图像： 使用 drawImage() 方法

示例

以下示例演示了如何使用 Canvas 样式创建带有渐变填充和描边的矩形：

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

// 创建一个渐变
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');

// 设置填充样式
ctx.fillStyle = gradient;

// 设置描边样式
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;

// 绘制矩形
ctx.fillRect(50, 50, 150, 100);
ctx.strokeRect(50, 50, 150, 100);