<canvas id="c1" width="600" height="400"><canvas>
找到画布： var c1=document.getElementById("c1")；
判断是否有getContext：if(!c1.getContext){console.log("当前浏览器不支持canvas,请下载最新浏览器")}；
获取画笔，上下文对象：var ctx=c1.getContext("2d")
1、绘制填充矩形(实心矩形）,默认背景色为#000
ctx.fillRect(x,y,矩形宽度，矩形高度）
拆分等同于
ctx.rect(x,y,矩形宽度，矩形高度)；
ctx.fill();
2、路径绘制矩形（空心矩形）
ctx.strokeRect(x,y,矩形宽度，矩形高度
拆分等同于
ctx.rect(x,y,宽度，高度）
ctx.stroke()
注意：
ctx.rect(x,y,宽度，高度）
ctx.stroke()
ctx.rect(x,y,矩形宽度，矩形高度)；
ctx.fill();
画布上会显示出两个黑色的矩形，这个显示是不对的
因为如果画完一个矩形后没有抬笔，就会被默认为同一条路径，最后fill填充的时候就会把这条路径上的图形都给填充
所以要使用beginPath和closePath,正确写法如下：
ctx.beginPath()
ctx.rect(x,y,宽度，高度）
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.rect(x,y,矩形宽度，矩形高度)；
ctx.fill();
ctx.closePath()
3、绘制圆
ctx.arc(
