Canvas：网页上的画布

文章目录

- 前言
- 一、Canvas基础
- - 1.1 定义与初始化
  - 1.2 绘制基础图形
- 二、样式与颜色
- 三、变换
- 四、渐变与阴影
- 五、图像处理
- 六、动画
- 七、事件处理
- 结语

前言

HTML5 的引入为网页带来了更多的交互性和动态性，而 Canvas 作为其中的一部分，成为了网页开发者手中的重要工具。Canvas 提供了一个空白的“画布”，通过 JavaScript 控制，可以在此基础上绘制各种图形、动画甚至是游戏界面。本文将详细介绍 Canvas 的各个方面，包括其基础知识、核心功能以及如何运用这些知识来创建丰富多样的视觉效果。

一、Canvas基础

1.1 定义与初始化

Canvas 是一个 HTML 元素，用于在网页上显示图形内容。要使用 Canvas，首先需要在 HTML 中定义一个标签，并指定其宽度和高度：

<canvas id="myCanvas" width="500" height="500"></canvas>

接着，在 JavaScript 中获取这个元素，并获得其上下文对象：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // 2D 上下文

1.2 绘制基础图形

Canvas 支持绘制多种基本图形，如矩形、圆、路径等。

绘制矩形：fillRect 和 strokeRect 分别用于绘制填充矩形和描边矩形。
绘制圆形：使用 arc 方法绘制圆形。
绘制路径：通过组合 moveTo、lineTo、arcTo 等方法来创建复杂的路径。

// 绘制填充矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);// 绘制描边矩形
ctx.strokeStyle = 'blue';
ctx.strokeRect(200, 50, 100, 100);// 绘制圆形
ctx.beginPath();
ctx.arc(350, 100, 50, 0, Math.PI * 2);
ctx.fill();// 绘制路径
ctx.beginPath();
ctx.moveTo(50, 200);
ctx.lineTo(200, 200);
ctx.lineTo(200, 300);
ctx.closePath();
ctx.stroke();

二、样式与颜色

Canvas 提供了丰富的样式设置选项，包括颜色、透明度、线条宽度等。

填充颜色：使用 fillStyle 属性设置。
描边颜色：使用 strokeStyle 属性设置。
透明度：通过 globalAlpha 属性控制。
线条宽度：使用 lineWidth 属性设置。
线条端点样式：使用 lineCap 属性设置。
线条连接样式：使用 lineJoin 属性设置。

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.strokeStyle = 'rgba(0, 0, 255, 0.8)'; // 不透明度为0.8的蓝色
ctx.globalAlpha = 0.7; // 全局透明度
ctx.lineWidth = 5; // 线条宽度
ctx.lineCap = 'round'; // 圆形端点
ctx.lineJoin = 'bevel'; // 斜角连接

三、变换

Canvas 提供了平移、旋转和缩放等变换操作，这些操作可以改变绘图的坐标系统，从而实现更复杂的图形效果。

平移：使用 translate 方法。
旋转：使用 rotate 方法。
缩放：使用 scale 方法。

// 平移
ctx.translate(100, 100);
ctx.fillRect(0, 0, 50, 50);// 旋转
ctx.translate(200, 100);
ctx.rotate(Math.PI / 4); // 45度旋转
ctx.fillRect(0, 0, 50, 50);// 缩放
ctx.translate(300, 100);
ctx.scale(2, 2); // 横向和纵向都放大2倍
ctx.fillRect(0, 0, 50, 50);

四、渐变与阴影

Canvas 支持线性渐变、径向渐变和阴影效果，这些特性可以使图形看起来更加生动和立体。

线性渐变：使用 createLinearGradient 方法。
径向渐变：使用 createRadialGradient 方法。
阴影：通过设置 shadowColor、shadowBlur、shadowOffsetX 和 shadowOffsetY 属性。

// 线性渐变
let linearGradient = ctx.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, 'red');
linearGradient.addColorStop(1, 'blue');
ctx.fillStyle = linearGradient;
ctx.fillRect(50, 200, 200, 100);// 径向渐变
let radialGradient = ctx.createRadialGradient(300, 250, 10, 300, 250, 100);
radialGradient.addColorStop(0, 'white');
radialGradient.addColorStop(1, 'black');
ctx.fillStyle = radialGradient;
ctx.fillRect(250, 200, 100, 100);// 阴影
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(50, 350, 100, 100);

五、图像处理

Canvas 不仅可以绘制图形，还可以用来处理图像，如裁剪、缩放、应用滤镜等。

加载图像：使用 Image 对象加载图像。
绘制图像：使用 drawImage 方法。
图像滤镜：通过读取和修改像素数据来实现滤镜效果。

let img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {// 绘制图像ctx.drawImage(img, 0, 0, 200, 200);// 应用灰度滤镜let imageData = ctx.getImageData(0, 0, 200, 200);for (let i = 0; i < imageData.data.length; i += 4) {let avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;imageData.data[i] = avg; // RedimageData.data[i + 1] = avg; // GreenimageData.data[i + 2] = avg; // Blue}ctx.putImageData(imageData, 0, 0);
};

六、动画

Canvas 是创建动画的理想选择，通过循环调用 requestAnimationFrame 方法可以实现平滑的动画效果。

let x = 0;function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'red';ctx.fillRect(x, 50, 50, 50);x += 1;if (x > canvas.width) {x = 0;}requestAnimationFrame(animate);
}animate();

七、事件处理

Canvas 可以响应用户的鼠标和触摸事件，通过监听这些事件，可以实现用户交互。

canvas.addEventListener('mousemove', function(event) {let rect = canvas.getBoundingClientRect();let mouseX = event.clientX - rect.left;let mouseY = event.clientY - rect.top;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = 'red';ctx.fillRect(mouseX - 25, mouseY - 25, 50, 50);
});