canvas相关单位
实际上在刚接触canvas的时候，我犯了一个错误。将canvas的画布进行了如下设置：
<canvas style='width: 700px;height:700px'></canvas>
这样设置以后，在画布中画圆的时候，我进行了如下设置：
var mycanvas = ocanvas.getContext('2d');
mycanvas.beginPath();
mycanvas.arc(350,350,300,0,2*Math.PI)
后面才发现圆形没有如预期那样显示在画布的中央，实际上canvas中是有相关设置的。
arc中圆点x,y的坐标是相对于画布的，而画布大小设置应该由它自己的属性width和height决定，而不是通过stytle来设置。
所以最后修改如下：
<canvas width='700' height='700'></canvas>
显示成功
canvas相关对象
我通过在控制台打印canvas.getContext(‘2d’)得到的对象，发现如下属性，便于处理
canvasRenderingContext2d对象.png
canvas的stroke()方法
需要注意在画的线时，上一条线的strokeStyle会影响下一条，即便使用了beginPath。所以解决方法只有每条线都设置相应的strokeStyle才行。
canvas清空画布方法
我采用的是以下链接的第二种方法：
（接下来考虑stroke颜色加深的问题）
