初识 canvas

本节课我们将正式开始学习 canvas，除了一些过时的浏览器 canvas 外，所有的新版本主流浏览器都它，所以你可以找个相对较新的浏览器开始你的学习。

canvas 中主要分两部分，分别是 <canvas> 和 canvas API。

<canvas> 定义图形，比如图表和其他图像。
<canvas> 只是图形容器，你必须使用脚本来绘制图形。

<canvas> 是 HTML 5 中的新，它有两个：

说明：canvas 和其他 HTML 一样， HTML 全局和 HTML 中的事件。

示例

我们先看示例：

<!DOCTYPE html>
<html>
<head>
	< charset="utf-8">
	<title>网Wiki</title>
    <style>
        #imooc{
            border:px solid #ccc;
        }
    </style>
</head>
<body>
	<canvas id="imooc"></canvas>
</body>
</html>

运行结果：

示例中，我们创建了 canvas 画布，最开始这个画布是空白的，我们看到的灰色边框是用 css 设定上去的，这里我们只需要知道怎么创建画布就可以了。

由于 canvas 属于较新的技术，有些旧版本的浏览器是的，所以我们在开发时就需要考虑到它们的使用场景。

<canvas> 容器中可以包含任何 HTML ，包含的 HTML 即为备选方案。

如果当前浏览器 <canvas> （尤其是IE9之前的IE浏览器），则可以使用备选兼容方案，如果当前浏览器 <canvas> ，则使用 canvas。

兼容示例

<!DOCTYPE html>
<html>
<head>
	< 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>

运行结果：

上面的案例中，如果在 canvas 的浏览器中就不会看到 <canvas> 包含的，如果在 canvas 的浏览器中则会。

前面我们说到 <canvas> 就是展示图像的容器，只是创建了固定大小的画布，但是它是没有自己的行为的，不过它定义了 JavaScript 的 API，我们可以使用 JavaScript 来绘制图形，<canvas> 脚本化客户端绘图操作。

绘制 canvas 通用步骤示例

这个简单的例子是在画布绘制绿色的长方形。

<!DOCTYPE html>
<html>
<head>
	< 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 id="imooc"></canvas>

通过 JavaScript 到画布。

const canvas = document.getElementById('imooc');

到画布的渲染上下文。

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

开始绘图。

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

这个案例为我们展示了 canvas 绘制的最基本流程，这里需要着重介绍一下渲染上下文。

开始绘制画布时我们还需要明白概念，就是渲染上下文。

canvas 起初是空白的，开始绘制前，首先需要通过 API 找到“渲染上下文”这个对象，然后在它的上面绘制。拿上面绘制绿色长方形的示例来说，我们首先通过 getContext('2d') 拿到 <canvas> 的渲染上下文，这个是用来获得渲染上下文和画布的绘制。getContext() 只有参数即上下文的格式，本教程只针对 2D 图像。上面案例中，我们定义的变量 ctx 存储的就是当前 canvas 的渲染上下文。

canvas 的画布坐标认和我们浏览器窗口坐标系是相同的，都是以为坐标原点，沿 X 轴向右为正值，沿 Y 轴向下为正值，这和我们数学上定义的坐标系有一些差别。

canvas 认坐标系如下图：

本小节主要讲解了 <canvas> 画布的创建以及如何用 JavaScript 操作画布去绘制简单图形。后面教程中提供的例子，会让你明白 canvas 可以做什么。

←开始之前

绘制线段→

初识 canvas

您的鼓励是对我最大的支持