当前位置：首页 > news >正文

前端可视化——Canvas实战篇

news 2025/7/3 18:17:46

本文是对应之前文章快速入门Canvas的进阶，主要实现了多个Canvas案例，比如创建画布、绘制矩形、圆形、文字、渐变以及清除画布等等实战案例。

本文目录

- - 1. 创建一个画布
  - 2. 绘制矩形方式一
  - 3. 绘制矩形方式二
  - 4. 绘制矩形综合案例
  - 5. 绘制圆形
  - 6. 绘制文字
  - 7. 实现渐变
  - 8. 清除画布

1. 创建一个画布

HTML 部分：使用 <canvas> 标签在 HTML 中创建画布元素，需要指定 width 和 height 属性来确定画布的大小。
JavaScript 部分：通过 document.getElementById 获取画布元素，再使用 getContext('2d') 获取 2D 绘图上下文，后续的绘图操作都基于这个上下文进行。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>创建画布</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');</script>
</body></html>

2. 绘制矩形方式一

使用 fillRect(x, y, width, height) 方法绘制填充矩形，x 和 y 是矩形左上角的坐标，width 和 height 是矩形的宽和高。
使用 strokeRect(x, y, width, height) 方法绘制描边矩形。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制矩形方式一</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 绘制填充矩形ctx.fillStyle = 'blue';ctx.fillRect(50, 50, 100, 100);// 绘制描边矩形ctx.strokeStyle = 'red';ctx.lineWidth = 2;ctx.strokeRect(200, 50, 100, 100);</script>
</body></html>

3. 绘制矩形方式二

使用 beginPath() 开始一个新的路径，rect(x, y, width, height) 定义矩形路径，fill() 填充路径，stroke() 描边路径。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制矩形方式二</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.rect(50, 50, 100, 100);ctx.fillStyle = 'green';ctx.fill();ctx.beginPath();ctx.rect(200, 50, 100, 100);ctx.strokeStyle = 'orange';ctx.lineWidth = 2;ctx.stroke();</script>
</body></html>

4. 绘制矩形综合案例

结合不同的矩形绘制方法，设置不同的样式和位置，实现复杂的矩形组合效果，可用于电商系统中的商品展示框、促销活动区域等。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制矩形综合案例</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 绘制商品展示框ctx.fillStyle = '#f0f0f0';ctx.fillRect(50, 50, 100, 150);ctx.strokeStyle = '#ccc';ctx.lineWidth = 1;ctx.strokeRect(50, 50, 100, 150);// 绘制促销活动区域ctx.fillStyle = 'yellow';ctx.fillRect(200, 50, 150, 80);ctx.strokeStyle = 'red';ctx.lineWidth = 2;ctx.strokeRect(200, 50, 150, 80);</script>
</body></html>

5. 绘制圆形

使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法绘制圆形或圆弧，x 和 y 是圆心坐标，radius 是半径，startAngle 和 endAngle 是起始和结束角度（以弧度为单位），anticlockwise 是一个布尔值，指定是否逆时针绘制。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制圆形</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(200, 150, 50, 0, 2 * Math.PI);ctx.fillStyle = 'purple';ctx.fill();</script>
</body></html>

6. 绘制文字

使用 font 属性设置字体样式，fillText(text, x, y) 方法填充文字，strokeText(text, x, y) 方法描边文字。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绘制文字</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.font = '20px Arial';ctx.fillStyle = 'black';ctx.fillText('欢迎来到秒杀平台', 50, 50);ctx.strokeStyle = 'red';ctx.strokeText('限时促销', 50, 100);</script>
</body></html>

7. 实现渐变

线性渐变：使用 createLinearGradient(x0, y0, x1, y1) 创建线性渐变对象，通过 addColorStop(offset, color) 方法添加颜色停止点。
径向渐变：使用 createRadialGradient(x0, y0, r0, x1, y1, r1) 创建径向渐变对象。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实现渐变</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');// 线性渐变const linearGradient = ctx.createLinearGradient(0, 0, 400, 0);linearGradient.addColorStop(0, 'red');linearGradient.addColorStop(1, 'yellow');ctx.fillStyle = linearGradient;ctx.fillRect(50, 50, 100, 100);// 径向渐变const radialGradient = ctx.createRadialGradient(250, 150, 20, 250, 150, 80);radialGradient.addColorStop(0, 'blue');radialGradient.addColorStop(1, 'white');ctx.fillStyle = radialGradient;ctx.beginPath();ctx.arc(250, 150, 80, 0, 2 * Math.PI);ctx.fill();</script>
</body></html>

8. 清除画布

使用 clearRect(x, y, width, height) 方法清除指定区域的画布内容。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除画布</title>
</head><body><canvas id="myCanvas" width="400" height="300"></canvas><button id="clearButton">清除画布</button><script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');const clearButton = document.getElementById('clearButton');ctx.fillStyle = 'green';ctx.fillRect(50, 50, 100, 100);clearButton.addEventListener('click', function () {ctx.clearRect(0, 0, canvas.width, canvas.height);});</script>
</body></html>