<canvas class="myCanvas" width="500" height="500"></canvas><!--定义宽高只能在行内定义，否则画的图会与你想象的不一样哦，不信可以试试-->
<script>
var c = document.getElementsByClassName('myCanvas')[0];//获取节点
var ctx = c.getContext('2d');//定义节点的canvas，之后就通过getContext进行canvas的绘制
/*矩形*/
ctx.fillStyle = 'gray';//定义填充样式
ctx.strokeStyle = 'green';//定义线性样式
ctx.lineWidth = '10';//定义线性的线宽，宽是从矩形框向内外两边同时加粗的
ctx.fillRect(100,50,100,100);//定义面性矩形[这四个参数分别是（横坐标，纵坐标，宽，高）]{这是灰色的矩形}
ctx.strokeRect(300,50,100,100);//定义线性矩形[这四个参数分别是（横坐标，纵坐标，宽，高）]{这是绿色的矩形框}
ctx.rect(100,200,100,100);//定义矩形（包括面性或者线性）
ctx.fill();ctx.stroke();//定义到底是线性还是面性，线面性上单独的在上面已经有了，线面性是定义在同个矩形就是灰色矩形加个绿色的边框
/*圆*/
ctx.beginPath();//这里可以理解为另外起笔，如果忽略这个步骤那么下面的样式就会继承上面的，所以最好不要忽略
ctx.fillStyle = 'blue';//定义填充样式
ctx.lineWidth = '10';//定义线性的线宽，宽是从圆圈向内外两边同时加粗的
ctx.arc(150,400,50,0,2*Math.PI);//定义圆[这五个参数分别是（横坐标，纵坐标，半径，起始的点(弧度)，结束的点(弧度)）]
ctx.fill();//定义圆为面性即蓝色圆面
ctx.beginPath();//另外起笔
ctx.strokeStyle = 'red';//定义线性的样式
ctx.lineWidth = '10';//定义线性的线宽，宽是从圆圈向内外两边同时加粗的
ctx.arc(350,400,50,0,2*Math.PI);//定义圆[这五个参数分别是（横坐标，纵坐标，半径，起始的点(弧度)，结束的点(弧度)）]
ctx.stroke();//定义圆为线性即红色圆圈或者圆环
ctx.beginPath();//另外起笔
ctx.fillStyle = 'blue';//定义填充样式
ctx.strokeStyle = 'red';//定义线性的样式
ctx.lineWidth = '10';//定义线性的线宽，宽是从圆圈向内外两边同时加粗的
ctx.arc(350,250,50,0,2*Math.PI);//定义圆[这五个参数分别是（横坐标，纵坐标，半径，起始的点(弧度)，结束的点(弧度)）]
ctx.stroke();ctx.fill();//同一坐标，同一半径组成了一个同心圆
</script>