canvas教程(一) 简介

什么是 canvas

按例是要介绍一下 canvas 的，在没有 canvas 之前，我们为了网页的效果，很多情况下是使用了图片来实现，不过用图片就需要加载，而且图片的体积也是一个问题，所以在 html5 的规范里新增了一个 canvas 元素（画布）

那么其实在 html5 中有两个 2d 图形技术，还有一个是叫 svg，而它们的区别就在于：

1. canvas 是由 js 动态生成的，svg 是使用 xml 静态描述的
2. 每次修改，canvas 需要重绘，svg 不需要
3. canvas 是“位图”，适用于像素处理和动态渲染，图形放大会影响质量，而 svg 是“矢量”，图形放大不会影响质量。

这两种技术都各有千秋，适用于不同的场合，我们可以根据开发场景来选择，这里就不多介绍了。

canvas 元素的知识

canvas 是一个行内块元素，它默认是宽度 300px 和高度 150px，可以使用 html 属性和 js 定义宽高。

⚠️ 假如是用 css 定义宽高，在使用 js 获取 canvas 的宽高依然会是其默认值

使用 canvas 绘制图形，需要三步

1. 获取 canvas 对象
2. 获取上下文环境对象 context
3. 绘制图形

var canvas = document.getElementById('canvasId');

var context = canvas.getContext('2d');

而我们以后所学习到的 api 和属性都是 context 对象的。

那么到这里有眼力好的同学就能看到了 getContext 方法的参数是 2d，那是不是有 3d？

其实 html5 的 canvas 暂时只提供了 2d，想在 html 使用 3d 的同学可以学习一下 webgl，webgl 其实难度也有点大，也许可以尝试一下 threejs，因为 threejs 是基于 webgl 封装的，感兴趣的都可以去相关的官网上学习。

结束

好了，本次的教程就到这里结束了，下次将为大家带来直线相关的绘制

戳我进入 canvas 教程(二) 绘制直线