当前位置：首页 > news >正文

Canvas基础篇：概述

news 2025/4/30 9:57:08

Canvas基础篇：概述

什么是Canvas
Canvas要素
- 定义<canvas>标签
- - CSS更改画布宽度和高度（反例：不生效）
  - - 代码实现
    - 效果预览
  - 画布属性更改画布宽度和高度（正例：生效）
  - - 代码实现
    - 效果预览
- 获取上下文对象
- - 检查支持性
- 绘制图形
- - 代码实现
  - 效果预览
结语

什么是Canvas

Canvas，又称”画布“（后续对canvas元素的操作统一用：”画布“标识），其本质是HTML5中的一个标签元素，我们可以通过JavaScript等脚本操作Canvas元素来绘制图形。
我们可以参考 Canvas官方文档进行学习，本专栏的所有内容皆是基于该文档，并在该文档的基础上进行补充。

Canvas要素

Canvas主要包括三个要素：

定义标签（定义画布），并通过脚本获取画布元素。
获取画布的上下文对象。
在画布上绘制图形。

定义标签

在上文中，我们提到Canvas本质是HTML5中的一个标签元素，所以若想在页面中使用Canvas，必须要定义标签。该标签有两个属性：width（画布的宽度）和height（画布的高度），即：我们不能通过CSS属性修改画布的宽度和高度，如以下示例：

CSS更改画布宽度和高度（反例：不生效）

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#canvas {height: 600px;width: 600px;}</style></head><body><canvas id="canvas"></canvas><script>function load() {// 获取画布元素let canvas = document.getElementById('canvas')let str = `canvas宽度为：${canvas.width}, canvas高度为：${canvas.height},`alert(str)}load()</script></body>
</html>

效果预览

CSS更改画布宽度和高度
从上述效果图中可以看出：JS中无法正确获得CSS中定义的宽度和高度数据，打印的值为画布默认的宽度（300）和高度（150）。

画布属性更改画布宽度和高度（正例：生效）

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="600" height="600"></canvas><script>function load() {// 获取画布元素let canvas = document.getElementById('canvas')let str = `canvas宽度为：${canvas.width}, canvas高度为：${canvas.height},`alert(str)}load()</script></body>
</html>

效果预览

画布属性更改画布宽度和高度

获取上下文对象

在JS中获取画布元素后，一般通过 getContext() 获取上下文，其参数为上下文类型。例如：我们使用Canvas绘制平面图形（2D），其参数为：getContext(‘2D’) 。
我们可以通过 getContext(‘2D’) 绘制平面图形，那我们能不能通过 getContext(‘3D’) 绘制3D图形呢？答案当然是否定的，目前3D图形绘制还是推荐WebGL、three.js相关技术实现。

检查支持性

并不是所有的浏览器都支持Canvas的，比如IE（虽然它已经退役了），我们可以通过简单的判断来处理不支持Canvas情况：

let canvas = document.getElementById("tutorial");if (canvas.getContext) {// 支持，则继续绘图let ctx = canvas.getContext("2d");// drawing code here
} else {// 不支持，其他操作
}

绘制图形

在Canvas中，只支持两种形式的图形绘制：矩形和路径（由一系列点连成的线段）。Canvas中所有其他类型的图形都是通过一条或者多条路径组合而成的。矩形和路径的具体绘制方式，在后面的专栏中我会详细讲解。
除此之外，Canvas还支持三种绘制模式：填充模式fill、边框模式stroke、清除模式clear。这三种模式在后面的专利中我也会详细讲解。
本文只会给一个简单的图形绘制示例：

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="600" height="600"></canvas><script>function load() {// 获取画布元素let canvas = document.getElementById('canvas')if (canvas.getContext) {// 获取上下文对象let ctx = canvas.getContext("2d");// 绘制第一个矩形ctx.fillStyle = "rgb(200,0,0)";ctx.fillRect(10, 10, 55, 50);// 绘制第二个矩形ctx.fillStyle = "rgba(0, 0, 200, 0.5)";ctx.fillRect(30, 30, 55, 50);}}load()</script></body>
</html>