初识 canvas
1. 前言
2. canvas 介绍
2.1 <canvas> 标签
| 属性 | 值 | 说明 |
|---|---|---|
| width | pixels | 设置 canvas 画布的宽度。 |
| height | pixels | 设置 canvas 画布的高度。 |
标签示例
我们先看一个示例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc"></canvas>
</body>
</html>
运行结果：
示例中，我们创建了一个 canvas 画布，最开始这个画布是空白的，我们看到的灰色边框是用 css 设定上去的，这里我们只需要知道怎么创建画布就可以了。
2.2 canvas 兼容方案
由于 canvas 属于较新的技术，有些旧版本的浏览器是不支持的，所以我们在开发时就需要考虑到它们的使用场景。
兼容示例
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc" width="350" height="200" style="border:px solid #f2180d;">
<!-- 这里是备选方案 -->
您的浏览器不支持 HTML5 canvas 标签。
如果支持HTML5 canvas 标签，则不会看到这些内容
<img src="images/imooc.png" width="150" height="150" alt=""/>
</canvas>
</body>
</html>
运行结果：
2.3 canvas API 接口
前面我们说到 <canvas> 就是一个展示图像的容器，只是创建了一个固定大小的画布，但是它是没有自己的行为的，不过它定义了 JavaScript 的 API，我们可以使用 JavaScript 来绘制图形，<canvas> 支持脚本化客户端绘图操作。
绘制 canvas 通用步骤示例
这个简单的例子是在画布绘制一个绿色的长方形。
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc"></canvas>
<script>
// 根据id属性获取到canvas标签
const canvas = document.getElementById('imooc');
// 获取到canvas的 渲染上下文, 渲染上下文的概念后面有讲到
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(, , , );
</script>
</body>
</html>
运行结果：
我们将上面的例子拆分讲解：
这个案例为我们展示了一个 canvas 绘制的最基本流程，这里需要着重介绍一下渲染上下文。
2.3.1 “渲染上下文”的概念
开始绘制画布时我们还需要明白一个概念，就是渲染上下文。
canvas 起初是空白的，开始绘制内容前，首先需要通过 API 找到“渲染上下文”这个对象，然后在它的上面绘制。拿上面绘制绿色长方形的示例来说，我们首先通过 getContext('2d') 方法拿到 <canvas> 的渲染上下文，这个方法是用来获得渲染上下文和画布的绘制功能。getContext() 只有一个参数即上下文的格式，本教程只针对 2D 图像。 上面案例中，我们定义的变量 ctx 存储的就是当前 canvas 的渲染上下文。
3. 画布坐标
canvas 默认坐标系如下图：
4. 总结
本小节主要讲解了 <canvas> 画布的创建以及如何用 JavaScript 操作画布去绘制一个简单图形。后面教程中提供的例子，会让你明白 canvas 可以做什么。