HTML中Canvas关键知识点总结介绍_F11 - 专业站长和开发者的学习网站

Canvas 是 HTML5 提供的一个用于绘制图形的元素，它通过 JavaScript 来操作，可以用于创建图表、游戏图形、数据可视化等。以下是关于 Canvas 的一些关键知识点：

一、基本概念

1. Canvas 元素

Canvas 元素是 HTML5 新增的，用于在网页上绘制图形。它通过 JavaScript 提供的 API 进行操作。

您的浏览器不支持 canvas 元素。

</canvas>

2. 获取绘图上下文

要在 Canvas 上绘图，需要先获取绘图上下文。最常用的是 2D 上下文：

1 2	var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');

二、基本绘图操作

1. 矩形

Canvas 提供了三种绘制矩形的方法：

填充矩形：fillRect(x, y, width, height) - 在指定位置绘制一个填充的矩形。
描边矩形：strokeRect(x, y, width, height) - 在指定位置绘制一个矩形的边框。
清除矩形：clearRect(x, y, width, height) - 清除指定矩形区域，使其变透明。

ctx.fillStyle = 'green'; // 设置填充颜色

ctx.fillRect(10, 10, 100, 100); // 绘制填充矩形

ctx.strokeStyle = 'blue'; // 设置边框颜色

ctx.lineWidth = 5; // 设置边框宽度

ctx.strokeRect(120, 10, 100, 100); // 绘制边框矩形

ctx.clearRect(50, 50, 60, 60); // 清除矩形区域

2. 绘制路径

路径绘制是 Canvas 绘图的重要部分，包括以下步骤：

开始路径：beginPath() - 开始一个新的路径。
移动到：moveTo(x, y) - 将画笔移动到指定位置。
绘制线段：lineTo(x, y) - 从当前点绘制一条直线到指定位置。
闭合路径：closePath() - 闭合当前路径。
填充路径：fill() - 使用当前填充样式填充路径。
描边路径：stroke() - 使用当前描边样式描边路径。

ctx.beginPath(); // 开始路径

ctx.moveTo(50, 50); // 移动到起点

ctx.lineTo(200, 50); // 绘制第一条线

ctx.lineTo(200, 200); // 绘制第二条线

ctx.lineTo(50, 200); // 绘制第三条线

ctx.closePath(); // 闭合路径

ctx.stroke(); // 描边路径

三、绘制曲线和弧线

1. 贝塞尔曲线

Canvas 提供了两种贝塞尔曲线：

二次贝塞尔曲线：quadraticCurveTo(cp1x, cp1y, x, y) - 绘制一条二次贝塞尔曲线，cp1x 和 cp1y 是控制点的坐标，x 和 y 是终点的坐标。
三次贝塞尔曲线：bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) - 绘制一条三次贝塞尔曲线，cp1x 和 cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个控制点的坐标，x 和 y 是终点的坐标。

// 二次贝塞尔曲线

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.quadraticCurveTo(50, 50, 80, 20); // 控制点(50, 50)，终点(80, 20)

ctx.stroke();

// 三次贝塞尔曲线

ctx.beginPath();

ctx.moveTo(100, 100);

ctx.bezierCurveTo(150, 150, 200, 50, 250, 100); // 控制点1(150, 150)，控制点2(200, 50)，终点(250, 100)

ctx.stroke();

2. 绘制弧线

使用 arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法绘制弧线，参数分别是圆心坐标、半径、起始角度、结束角度和方向（顺时针或逆时针）。

ctx.beginPath();

ctx.arc(150, 150, 75, 0, Math.PI * 2, true); // 绘制一个完整的圆

ctx.stroke();

四、文本绘制

Canvas 提供了两种绘制文本的方法：

填充文本：fillText(text, x, y, maxWidth) - 在指定位置绘制填充文本，可选参数 maxWidth 指定最大宽度。
描边文本：strokeText(text, x, y, maxWidth) - 在指定位置绘制描边文本。

ctx.font = '30px Arial'; // 设置字体

ctx.fillStyle = 'black'; // 设置填充颜色

ctx.fillText('Hello, Canvas!', 50, 50); // 绘制填充文本

ctx.strokeStyle = 'red'; // 设置描边颜色

ctx.strokeText('Hello, Canvas!', 50, 100); // 绘制描边文本

五、图像处理

Canvas 提供了 drawImage 方法来绘制图像，方法有多种重载：

绘制完整图像：drawImage(image, dx, dy)
绘制图像的部分区域：drawImage(image, dx, dy, dWidth, dHeight)
绘制图像的指定部分到 Canvas 的指定位置：drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

var img = new Image();

img.onload = function() {

ctx.drawImage(img, 10, 10); // 在 (10, 10) 绘制完整图像

ctx.drawImage(img, 10, 150, 100, 100); // 在 (10, 150) 绘制图像，并缩放到 100x100 大小

ctx.drawImage(img, 50, 50, 100, 100, 150, 150, 100, 100); // 绘制图像的部分区域到指定位置

};

img.src = 'path/to/image.jpg';

六、变换操作

1. 平移

使用 translate(x, y) 方法将 Canvas 的原点（0,0）平移到指定位置。

1 2	ctx.translate(50, 50); // 平移原点到 (50, 50) ctx.fillRect(0, 0, 100, 100); // 绘制的矩形实际上在 (50, 50) 到 (150, 150) 之间

2. 旋转

使用 rotate(angle) 方法旋转 Canvas，角度为弧度。

1 2	ctx.rotate(Math.PI / 4); // 旋转 45 度 ctx.fillRect(0, 0, 100, 100); // 矩形被旋转

3. 缩放

使用 scale(x, y) 方法缩放 Canvas，x 和 y 分别表示水平方向和垂直方向的缩放比例。

1 2	ctx.scale(2, 2); // 水平和垂直方向均缩放 2 倍 ctx.fillRect(0, 0, 100, 100); // 绘制的矩形被缩放到 200x200

七、状态保存和恢复

Canvas 提供 save() 和 restore() 方法来保存和恢复绘图状态。
保存的状态包括当前的变换矩阵、裁剪路径、所有绘图属性等。

// 线性渐变

var linearGradient = ctx.createLinearGradient(0, 0, 200, 0);

linearGradient.addColorStop(0, 'red');

linearGradient.addColorStop(1, 'blue');

ctx.fillStyle = linearGradient;

ctx.fillRect(10, 10, 200, 100);

// 径向渐变

var radialGradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100);

radialGradient.addColorStop(0, 'white');

radialGradient.addColorStop(1, 'black');

ctx.fillStyle = radialGradient;

ctx.fillRect(50, 50, 200, 200);

八、渐变和模式

1. 渐变

Canvas 支持线性渐变和径向渐变：

线性渐变：createLinearGradient(x0, y0, x1, y1) 创建一个线性渐变对象，然后使用 addColorStop 方法添加颜色停止点。
**径向渐

变**：createRadialGradient(x0, y0, r0, x1, y1, r1) 创建一个径向渐变对象，然后使用 addColorStop 方法添加颜色停止点。

// 线性渐变

var linearGradient = ctx.createLinearGradient(0, 0, 200, 0);

linearGradient.addColorStop(0, 'red');

linearGradient.addColorStop(1, 'blue');

ctx.fillStyle = linearGradient;

ctx.fillRect(10, 10, 200, 100);

// 径向渐变

var radialGradient = ctx.createRadialGradient(100, 100, 20, 100, 100, 100);

radialGradient.addColorStop(0, 'white');

radialGradient.addColorStop(1, 'black');

ctx.fillStyle = radialGradient;

ctx.fillRect(50, 50, 200, 200);

2. 模式

使用 createPattern(image, repetition) 创建图案填充，其中 repetition 参数可以是 'repeat'、'repeat-x'、'repeat-y' 或 'no-repeat'。

var img = new Image();

img.onload = function() {

var pattern = ctx.createPattern(img, 'repeat');

ctx.fillStyle = pattern;

ctx.fillRect(10, 10, 200, 100);

};

img.src = 'path/to/image.jpg';

九、动画

通过循环调用 requestAnimationFrame 方法来创建动画效果。这个方法会在浏览器准备好下一帧动画时调用指定的函数，从而优化动画性能。

var x = 0;

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

ctx.fillRect(x, 50, 50, 50); // 绘制矩形

x += 2; // 更新位置

requestAnimationFrame(draw); // 请求下一帧

}

draw();

十、性能优化

1. 合理使用 requestAnimationFrame

使用 requestAnimationFrame 代替 setTimeout 或 setInterval 来创建动画，因为它在刷新频率方面更高效，并且在后台标签页中不会执行。

function animate() {

requestAnimationFrame(animate);

// 动画逻辑

}

animate();

2. 避免频繁重绘

尽量减少重绘次数，合并绘图操作，减少不必要的 clearRect 和 fillRect 操作。

3. 使用离屏 Canvas

使用离屏 Canvas 进行复杂图形的预渲染，然后在主 Canvas 中绘制，减少实时计算和渲染的开销。

var offscreenCanvas = document.createElement('canvas');

var offscreenCtx = offscreenCanvas.getContext('2d');

offscreenCanvas.width = 500;

offscreenCanvas.height = 400;

// 在离屏 canvas 上绘图

offscreenCtx.fillStyle = 'green';

offscreenCtx.fillRect(0, 0, 100, 100);

// 然后在主 canvas 上绘制离屏 canvas

ctx.drawImage(offscreenCanvas, 0, 0);

总结

Canvas 提供了一套强大的 2D 绘图 API，适用于各种图形绘制、图像处理和动画制作。掌握 Canvas 的基础操作、路径绘制、变换操作、状态管理和性能优化等知识，可以帮助你创建复杂且高效的网页图形应用。

通过以上详细的讲解，希望能让你对 Canvas 有更全面的理解，并能够应用这些知识点进行实际开发。