零基础轻松学习 canvas

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

<canvas> 是 HTML5 中的一个元素，用于通过 JavaScript 绘制图形、动画和其他视觉内容。

下面是一些常用的 canvas 用法和示例：

1.基本用法：在 HTML 中，你可以使用 <canvas> 元素来创建一个绘图区域。您可以设置 <canvas> 的宽度和高度属性，以定义绘图的区域大小。然后，使用 JavaScript 获取 canvas 上下文（context），它是一个具有绘图方法的对象。

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

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

2.绘制矩形：通过 fillRect() 和 strokeRect() 方法，您可以在 canvas 上绘制矩形。这些方法分别用于填充矩形内部和绘制矩形的边框。

ctx.fillStyle = 'red';  // 填充颜色
ctx.fillRect(50, 50, 100, 100);  // 在坐标 (50, 50) 处绘制宽为 100，高为 100 的填充矩形

ctx.strokeStyle = 'blue';  // 轮廓颜色
ctx.strokeRect(75, 75, 50, 50);  // 在坐标 (75, 75) 处绘制宽为 50，高为 50 的矩形轮廓

3.绘制路径：使用路径方法（如 beginPath()、moveTo()、lineTo() 和 closePath()）创建复杂的形状，然后使用 fill() 或 stroke() 渲染路径。

ctx.beginPath();  // 开始路径
ctx.moveTo(200, 100);  // 将笔触移到坐标 (200, 100)
ctx.lineTo(250, 50);   // 从当前位置绘制一条到坐标 (250, 50) 的线段
ctx.lineTo(300, 100);
ctx.closePath();  // 封闭路径

ctx.fillStyle = 'green';
ctx.fill();  // 填充路径内部

ctx.strokeStyle = 'orange';
ctx.stroke();  // 绘制路径轮廓

4.绘制文本：使用 fillText() 或 strokeText() 方法在 canvas 上绘制文本。您可以设置字体、颜色、位置等属性。

ctx.font = '20px Arial';  // 设置字体
ctx.fillStyle = 'purple';  // 填充颜色
ctx.fillText('Hello, Canvas!', 50, 150);  // 在坐标 (50, 150) 处填充文本

ctx.strokeStyle = 'pink';  // 轮廓颜色
ctx.strokeText('Hello, Stroke!', 50, 180);  // 在坐标 (50, 180) 处绘制文本轮廓

5.绘制图像：使用 drawImage() 方法可以绘制图片。确保图像加载完成后再进行绘制。

const img = new Image();  // 创建图像对象
img.src = 'image.jpg';  // 设置图像源

img.onload = function() {
    ctx.drawImage(img, 0, 0);  // 在坐标 (0, 0) 处绘制图像
};

6.动画效果：使用定时器函数（如 setInterval() 或 requestAnimationFrame()）结合绘图操作，您可以在 canvas 上创建动画。

let x = 0;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清除画布
    ctx.fillRect(x, 50, 50, 50);  // 绘制矩形
    x += 2;  // 移动位置
    requestAnimationFrame(draw);  // 递归调用，创建动画效果
}

draw();  // 启动动画

那么canvas标签一般会用在那些场景下呢？

1.绘制图表和数据可视化： 可以使用 <canvas> 来创建各种类型的图表，如折线图、柱状图、饼图等，以可视化数据和信息。

2.创建游戏： 如果你对游戏开发感兴趣，<canvas> 提供了绘制图形、动画和用户交互的能力，适用于制作简单的游戏。

3.绘制图像编辑器： 可以使用 <canvas> 来实现基本的图像编辑功能，如绘制、擦除、涂色等，以及应用滤镜和特效。

4.动画效果： <canvas> 可以用于创建各种动画，从简单的移动对象到复杂的粒子效果，让网页更生动有趣。

5.特效和过渡： 通过 <canvas>，您可以实现许多炫酷的特效和过渡效果，如页面背景变化、元素的飞入、淡入淡出等。

6.定制控件和UI元素： 如果需要定制化的UI元素，如自定义按钮、滑块、选择器等，可以使用 <canvas> 绘制这些元素。

7.绘制图像和照片： 可以使用 <canvas> 将图像或照片绘制到网页上，并进行相应的处理和调整。

8.实时数据展示： 通过定时更新 <canvas> 中的内容，可以实时地展示数据变化，如股票价格走势、实时地图等。

9.交互式应用：<canvas> 可以响应用户的交互事件，能够创建交互式的应用，如拖拽、点击、缩放等。

以上是 HTML5 中 <canvas> 标签的内容，<canvas> 标签在动画、签名、图表中都是常用的，也是新手要掌握的内容之一，初学者可以根据今天的内容，用canvas 画一些图形，了解它的基本用法。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。