canvas教程(一) 简介
什么是 canvas
按例是要介绍一下 canvas 的，在没有 canvas 之前，我们为了网页的效果，很多情况下是使用了图片来实现，不过用图片就需要加载，而且图片的体积也是一个问题，所以在 html5 的规范里新增了一个 canvas 元素（画布）
那么其实在 html5 中有两个 2d 图形技术，还有一个是叫 svg，而它们的区别就在于：
- canvas 是由 js 动态生成的，svg 是使用 xml 静态描述的
- 每次修改，canvas 需要重绘，svg 不需要
- canvas 是“位图”，适用于像素处理和动态渲染，图形放大会影响质量，而 svg 是“矢量”，图形放大不会影响质量。
这两种技术都各有千秋，适用于不同的场合，我们可以根据开发场景来选择，这里就不多介绍了。
canvas 元素的知识
canvas 是一个行内块元素，它默认是宽度 300px 和高度 150px，可以使用 html 属性和 js 定义宽高。
?? 假如是用 css 定义宽高，在使用 js 获取 canvas 的宽高依然会是其默认值
使用 canvas 绘制图形，需要三步
- 获取 canvas 对象
- 获取上下文环境对象 context
- 绘制图形
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 封装的，感兴趣的都可以去相关的官网上学习。
结束
好了，本次的教程就到这里结束了，下次将为大家带来直线相关的绘制