点击上方“IT那活儿”公众号--专注于企业全栈运维技术分享，不管IT什么活儿，干就完了！！！

  

Canvas是HTML5新增的一个元素，它允许使用脚本（如JavaScript）在网页上绘制图像、进行动画制作，甚至可以进行实时视频处理和渲染。

Canvas是一个HTML元素，用于在网页上通过JavaScript绘制图形。它本身不提供绘图功能，但提供了一个绘图上下文（通常是2D或WebGL），通过这个上下文来进行实际的绘图操作。

1.1 创建Canvas元素

在HTML文件中，使用<canvas>标签来定义Canvas元素，并通过width和height属性设置其宽度和高度。

<canvas id="myCanvas" width="400" height="300"></canvas>

1.2 获取绘图上下文

在JavaScript中，首先通过document.getElementById()等方法获取Canvas元素，然后调用其getContext()方法来获取绘图上下文。对于2D绘图，传递"2d"作为参数。

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

2.1 绘制矩形

使用fillRect()、strokeRect()和clearRect()方法可以绘制和清除矩形。

示例：绘制一个红色填充的矩形

ctx.fillStyle = "red"; // 设置填充颜色为红色
ctx.fillRect(10, 10, 150, 75); // 绘制一个从(10,10)开始，宽150px，高75px的矩形

2.2 绘制路径

通过beginPath()、moveTo()、lineTo()、closePath()、stroke()和fill()方法，可以绘制复杂的路径。

示例：绘制一个三角形

ctx.beginPath(); // 开始新路径
ctx.moveTo(75, 50); // 起点
ctx.lineTo(100, 150); // 绘制第一条线
ctx.lineTo(25, 150); // 绘制第二条线
ctx.closePath(); // 闭合路径（非必须，但可用于fill操作）
ctx.lineWidth = 5; // 设置线条宽度
ctx.strokeStyle = "blue"; // 设置线条颜色
ctx.stroke(); // 描边路径
ctx.fillStyle = "yellow"; // 设置填充颜色
ctx.fill(); // 填充路径（此时会填充整个三角形）

注意：

在上面的例子中，closePath()实际上是多余的，因为fill()会填充由moveTo()和lineTo()指定的所有点形成的闭合区域（即使它们没有显式地闭合）。

然而，对于某些特定的路径，使用closePath()可以确保路径被正确闭合，特别是当你不打算立即填充或描边路径时。

2.3 绘制圆弧和圆形

使用arc()方法可以绘制圆弧或圆形。

示例：绘制一个圆形

ctx.beginPath(); // 开始新路径
ctx.arc(100, 75, 50, 0, 2 * Math.PI); // 绘制一个圆心在(100,75)，半径为50的圆
ctx.fill(); // 填充圆形

2.4 绘制文本

使用fillText()和strokeText()方法可以绘制文本。

示例：在Canvas上绘制文本

ctx.font = "30px Arial"; // 设置字体大小和字体类型
ctx.fillText("Hello, Canvas!", 10, 50); // 在Canvas上绘制填充文本
ctx.strokeText("Hello, Canvas!", 10, 100); // 在Canvas上绘制文本边框

除了上面提到的fillStyle、strokeStyle、lineWidth等属性外，Canvas还提供了许多其他属性来设置样式和颜色，如：

• globalAlpha（全局透明度）；

• lineCap（线条末端样式）；

• lineJoin（线条连接样式）等。

在使用Canvas进行复杂绘图时，性能优化变得尤为重要。

以下是一些优化技巧：

• 尽量减少绘制调用次数，合并多个绘制操作为一个复合操作。
• 使用requestAnimationFrame代替setTimeout或setInterval进行动画绘制，以确保绘图的平滑性。
• 利用Canvas的getImageData()和putImageData()方法进行像素级操作，实现高效的图像处理。
• 使用硬件加速技术，如CSS的transform和opacity属性，来加速Canvas的渲染。但请注意，直接对Canvas元素应用这些属性可能不会起到加速作用，它们通常用于加速Canvas元素的父元素或整个页面的渲染。

Canvas是一个非常强大的绘图工具，通过掌握其基础知识和高级技巧，你可以在网页上实现各种复杂的图形和动画效果。

END