canvas，是一个H5的新标签，通过js来实现绘图的神奇功能。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
那么我们怎么来使用canvas标签呢？
<canvas width="800" height="600" id="context"></canvas>
注意，在这里我直接在行间设置了宽高，是因为若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素，而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部，或者是直接用js脚本中来设置。如下：
<script>
var context = document.getElementById("myCanvas");
context .width=200;
context .height=200;
</script>
首先，获取canvas的绘图环境，这是一个封装了很多绘图功能的对象。
var gd =canvas.getContext("2d");
来举个栗子
<script>
var oC=document.querySelector('#mycontext');
var gd =oC.getContext('2d'); //获取该canvas的2D绘图环境对象
gd .moveTo(10,10); //定义绘画开始的位置
gd .lineTo(150,50); //画一条直线，结束点坐标是x=150,y=50
gd .strokeStyle='red'; //设定描边颜色为红色，要写在.stroke()方法前面
gd .lineWidth=20; //设定描边粗细为20，不要写px
context.stroke(); //描边,即绘制边框
</script>
我们使用了几个绘图方法：
1.moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置
2.lineTo(x坐标 , y坐标) 顾名思义，就是画一条直线到某个点，此方法只做路径运动，并没有视觉上的效果。
3.stroke() 描边方法 让运动路径从视觉上显现 用 画笔描出来
4.strokeStyle 设定颜色的方法 可以直接用颜色名称，例如"red" "green",或者用十六进制颜色"#fff",还有rgb(0-255,0-255,0-255)， rgba(0-255,0-255,0-255,透明度)。
栗子2 用canvas写出两个不一样颜色的线 ：
<script>
var oC=document.querySelector('#mycontext');
var gd =oC.getContext('2d');
gd .moveTo(0,0);
gd .lineTo(150,50);
gd .lineTo(20,100);
gd .strokeStyle = "blue";
gd .stroke();
gd .beginPath();
gd .moveTo(90,90);
gd .lineTo(80,150);
gd .strokeStyle = "red";
gd .closePath();
gd .stroke();
</script>
关于路径beginPath和closePath
1、系统默认在绘制第一个路径的开始点为beginPath
*2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
ps：记住每次画路径都在前后加gd .beginPath() 和gd .closePath()
当然canvas也可以绘制出各种图形
栗子3 绘制矩形
<script>
window.onload= function () {
var oC=document.querySelector('#c1');
var gd=oC.getContext('2d');
gd.strokeStyle='red';//边的颜色
gd.lineWidth=20; //边的宽度
gd.fillStyle='green'; // 整个涂满的颜色
gd.fillRect(100,100,200,300); //满矩形（x矩形起点横坐标，y矩形起点纵坐标，矩形宽度，矩形高度）
gd.strokeRect(100,100,200,300); //矩形
}
绘制矩形有两个小方法：
1 context.fillRect(x,y,width,height) 所谓的满矩形就是填充一个矩形
2 strokeRect(x,y,width,height) 绘制矩形（不填色）。笔触的默认颜色是黑色。
相反 清除矩形区域即为
context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
canvas更多有趣的东西，我们下次再讲~~~
