初识 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 可以做什么。