canvas即一个H5的新标签，通过js来实现绘图的神奇功能。
<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 context =canvas.getContext("2d");
写个小例子1
<script>
var oC=document.querySelector('#mycontext');
var context=oC.getContext('2d'); //获取该canvas的2D绘图环境对象
context.moveTo(10,10); //定义绘画开始的位置
context.lineTo(150,50); //画一条直线，结束点坐标是x=150,y=50
context.strokeStyle='red'; //设定描边颜色为红色，要写在.stroke()方法前面
context.lineWidth=20; //设定描边粗细为20，不要写px
context.stroke(); //描边,即绘制边框
</script>
我们使用了几个绘图方法：
1.moveTo(x坐标 , y坐标) 可以理解为定位画笔在画布上的位置
2.lineTo(x坐标 , y坐标) 顾名思义，就是画一条直线到某个点，此方法只做路径运动，并没有视觉上的效果。
3.stroke() 描边方法 让运动路径从视觉上显现 用 画笔描出来
4.strokeStyle 设定颜色的方法 可以直接用颜色名称，例如"red" "green",或者用十六进制颜色"#fff",还有rgb(1-255,1-255,1-255)， rgba(1-255,1-255,1-255,透明度)。
小例子2 写两个不一样颜色的线 代码如下：
<script>
var oC=document.querySelector('#mycontext');
var context=oC.getContext('2d');
context.moveTo(0,0);
context.lineTo(150,50);
context.lineTo(20,100);
context.strokeStyle = "blue";
context.stroke();
context.beginPath();
context.moveTo(90,90);
context.lineTo(80,150);
context.strokeStyle = "red";
context.closePath();
context.stroke();
</script>
关于路径beginPath和closePath
1、系统默认在绘制第一个路径的开始点为beginPath
*2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
ps：记住每次画路径都在前后加context.beginPath() 和context.closePath()
小例子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); //矩形
}
</script>
绘制矩形的两个小方法
1 context.fillRect(x,y,width,height) 所谓的满矩形就是填充一个矩形
2 strokeRect(x,y,width,height) 绘制矩形（不填色）。笔触的默认颜色是黑色。
相反 清除矩形区域即为
context.fillRect(x,y,width,height) strokeRect(x,y,width,height)
