【Canvas】初始Canvas

Canvas是什么？
简单的说，它是HTML5里的一个标签，作用是创建一个画布然后使用JavaScript在网页上画图。

<canvas></canvas>

Canvas标签本身没有绘图能力，它的所有绘图工作都必须在Javascript里面完成。

---

创建Canvas元素
要注意的是，canvas的宽高不要用CSS去控制，不然会造成图形拉伸变形，通常都是在标签里面定义好，像下面这样，或者在JS用立即执行函数（IIFE）设置。

<!--规定元素的id，宽度，高度-->
<canvas id="Demo" width="300" height="150"></canvas>
<script>
	var canvas = document.getElementById("Demo");
</script>

---

Canvas上下文 getContext()
什么是canvas上下文呢？我的理解就是工具栏，可以看下面图：

这是我们Window自带的绘图工具，红色框框就是我们的canvas，而绿色框框就是我们所谓的“上下文”。
getContext(contextID) 方法返回一个用于在画布上绘图的环境。
参数contextID指定了你想在画布上绘制的类型。目前只有2d是合法值，它指定了绘制二维图像，

<script>