是cointext.moveTo()  你到后面4行写成canvas.moveTo()了  浏览器调试栏里有报错吧

save()和restore()是相互匹配的，作用是用于保存状态和取出保存的状态。假设在画布内有很多个元素，你需要对各个元素都要进行不同的操作。如果你没有使用save()和restore()进行状态保存的话，那么你所做的操作实际上会对画布内所有的元素受到影响，并不能达到对各个元素进行不同的操作实现不同的效果这种情况。

getElementById('canvas').setAttribute("width","400px");

getElementById('canvas').setAttribute("height","400px");

不需要这么麻烦，用context.setLineDash([number1, number2])，就可以了，参数的数组是虚线的参数，分别单表实线的长度和空格的长度。

lineWidth后面已经用stroke绘制过了，第二个lineWidth覆盖上面一个然后再用stroke绘制了一次