一、前言
在当今的前端开发领域，HTML5 中的 canvas元素无疑是一颗耀眼的明星。它提供了强大的绘图能力，让我们能够在网页上创造出丰富多彩的图形、图像以及令人惊叹的动画效果。本文将带你深入探索 canvas的奇妙世界，从基础概念到精彩案例，让你轻松掌握 canvas的使用技巧。
二、Canvas 概述
canvas是 HTML5 引入的全新元素，主要用于在网页上进行图形绘制。它就像一块数字化的画布，以像素为单位，为我们提供了一个自由发挥创意的空间。通过 JavaScript 的操控，我们可以在 canvas上绘制各种形状、展示图像，甚至实现动态的动画效果，为网页增添独特的视觉魅力。
三、创建 Canvas 元素
在 HTML 页面中，创建一个 canvas元素非常简单。以下是代码示例：
<canvas id="myAwesomeCanvas" width="400" height="200"></canvas>
这里我们创建了一个 canvas元素，给它的 id写成 “myAwesomeCanvas”，并设置了宽度为 400 像素，高度为 200 像素。你可以根据实际需求调整这些参数，以满足不同的绘图场景。
四、获取 Canvas 上下文
要在 canvas上进行绘图操作，首先需要获取它的上下文。这可以通过以下 JavaScript 代码实现：
const canvas = document.getElementById('myAwesomeCanvas');
const ctx = canvas.getContext('2d');
通过 document.getElementById方法，我们可以获取到指定 id的 canvas元素。然后，使用 getContext方法并传入 “2d” 参数，我们就得到了一个二维绘图上下文对象 ctx。这个对象包含了一系列用于绘制图形的方法和属性。
五、绘制基本图形
1.矩形绘制
-
使用
fillRect方法可以绘制填充矩形。例如：
ctx.fillRect(50, 50, 100, 100);
- 而
strokeRect方法则用于绘制边框矩形。例如：
ctx.strokeRect(150, 50, 100, 100);
2.圆形绘制
- 要绘制圆形，可以借助
arc方法。如下所示：
ctx.beginPath();ctx.arc(200, 150, 50, 0, 2 * Math.PI);ctx.stroke();
3.线条绘制
- 首先使用
beginPath方法开启一条新的路径。然后，通过moveTo方法设置起点，再用lineTo方法设置终点。再使用stroke方法绘制线条。例如：
ctx.beginPath();ctx.moveTo(50, 150);ctx.lineTo(150, 150);ctx.stroke();
六、设置图形样式
1.填充颜色
- 通过
fillStyle属性可以设置填充颜色。例如：
ctx.fillStyle = 'red';ctx.fillRect(50, 50, 100, 100);
2.边框颜色和宽度：
strokeStyle属性用于设置边框颜色，而lineWidth属性则用来设置边框宽度。例如：
ctx.strokeStyle = 'blue';ctx.lineWidth = 5;ctx.strokeRect(150, 50, 100, 100);
七、绘制图像
在 canvas上绘制图像可以使用 drawImage方法。首先创建一个 Image对象，并设置其 src属性为图像的 URL。当图像加载完成后，调用 drawImage方法将图像绘制到 canvas上。示例代码如下：
const image = new Image();
image.src = 'your-image-url.jpg';
image.onload = function() {ctx.drawImage(image, 50, 50, 100, 100);
};
八、精彩案例
1.动态烟花秀
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></head><body><canvas id="fireworksCanvas" width="800" height="600"></canvas><script>const canvas = document.getElementById('fireworksCanvas');const ctx = canvas.getContext('2d');const particles = [];function Particle(x, y, hue, firework) {this.x = x;this.y = y;this.hue = hue;this.firework = firework;this.lifespan = 200;if (this.firework) {this.speedX = (Math.random() - 0.5) * 10;this.speedY = (Math.random() - 0.5) * 10;} else {this.speedX = (Math.random() - 0.5) * 3;this.speedY = Math.random() * -5;}}Particle.prototype.update = function () {if (this.firework) {this.x += this.speedX;this.y += this.speedY;this.lifespan--;} else {this.x += this.speedX;this.y += this.speedY;this.speedY += 0.1;this.lifespan--;}};Particle.prototype.draw = function () {ctx.beginPath();ctx.arc(this.x, this.y, 2, 0, 2 * Math.PI);ctx.fillStyle = `hsl(${this.hue}, 100%, 50%)`;ctx.fill();};function createFirework() {const hue = Math.random() * 360;const x = canvas.width / 2;const y = canvas.height;return new Particle(x, y, hue, true);}function createParticles(centerX, centerY, hue) {for (let i = 0; i < 50; i++) {particles.push(new Particle(centerX, centerY, hue, false));}}function draw() {ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.globalCompositeOperation = 'lighter';for (let i = particles.length - 1; i >= 0; i--) {particles[i].update();particles[i].draw();if (particles[i].lifespan <= 0) {particles.splice(i, 1);}}if (Math.random() < 0.05) {const firework = createFirework();particles.push(firework);createParticles(firework.x, firework.y, firework.hue);}requestAnimationFrame(draw);}draw();</script></body></html>
这个案例在网页上呈现出绚丽多彩的动态烟花效果，仿佛一场视觉盛宴。
2.旋转图形之舞
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></head><body><canvas id="rotationCanvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('rotationCanvas');const ctx = canvas.getContext('2d');let angle = 0;function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI);ctx.strokeStyle = 'blue';ctx.lineWidth = 5;ctx.stroke();ctx.save();ctx.translate(canvas.width / 2, canvas.height / 2);ctx.rotate(angle);ctx.beginPath();ctx.rect(-20, -20, 40, 40);ctx.fillStyle = 'red';ctx.fill();ctx.restore();angle += 0.05;requestAnimationFrame(draw);}draw();</script></body></html>
此案例展示了一个圆形和一个不断旋转的矩形。
3.波浪动画之美
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></head><body><canvas id="waveCanvas" width="800" height="400"></canvas><script>const canvas = document.getElementById('waveCanvas');const ctx = canvas.getContext('2d');let offset = 0;function drawWave() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.strokeStyle = 'blue';ctx.lineWidth = 2;for (let x = 0; x < canvas.width; x++) {const y = Math.sin(x * 0.02 + offset) * 20 + canvas.height / 2;if (x === 0) {ctx.moveTo(x, y);} else {ctx.lineTo(x, y);}}ctx.stroke();offset += 0.05;requestAnimationFrame(drawWave);}drawWave();</script></body></html>
这个案例通过绘制不断波动的蓝色线条，创造出一种宁静而优美的波浪动画效果。
九、总结
本文详细介绍了 canvas的基本用法，包括创建 canvas元素、获取上下文、绘制基本图形、设置图形样式以及绘制图像。同时，通过三个精彩案例 —— 动态烟花秀、旋转图形之舞和波浪动画之美，展示了 canvas的强大绘图和动画能力。相信通过学习本文，你已经对 canvas有了更深入的了解，并能够在网页开发中充分发挥它的优势，创造出令人惊艳的视觉效果。
