绘图时给两个正方形颜色是不同的，因为进行了位移，两个正方形坐标顶点不一样，不是完全重叠的，所以绿色的正方形不会覆盖红色的正方形

fillRect 

给多个canvas标签，每个canvas给不同的id，根据id得到不同的canvas进行操作，我觉得是这样

starpath函数最后没有cxt.fill()

是因为基本的星星半径太小了，设大点就会出现星星的形状了

你好！ 关于这个问题， 其实是因为Canvas的rotate的中心点是固定不变的，永远在canvas的 坐标为(0,0)处，并且也无法设置旋转中心点，而不是像CSS里面那样默认在元素的中心点。

回到你的源代码中，由于每一次的旋转中心点是一样的，而代码中每一次旋转之前都有一个translate，这样的话肯定会导致fillRect之后，context 复位出现问题。

做了一张图，解释了这么问题，图中 方块1 和方块5 最终位置不一样，所以说明在循环中，每次循环都会影响下一次的Context （context 没有复位成功），所以会导致下一次的渲染位置出现问题，导致位置误差越来越大，并且由于每次rotate的旋转的中心点在(0 ,0)， 所以星星的消失很可能是因为后面的星星位置被渲染到了画布之外，其实就是没有啦。

解决办法就是把 源码中的25 ，26行互换吧，这样先复位rotate ，再复位translate 就没问题啦，不过其实还有一个问题，就是本来直接这样用rotate，很容易会把对象旋转到画布以外，特别是里原点较远的 星星，所以 建议还是 通过简单的变换 来实现 绕自身中心点进行旋转。

比如对象的位置是在( x , y ),宽度为rectWidth，高度为rectHeight， 我们想让他沿着自身旋转 deg个角度；

context.translate(x + rectWidth / 2, y + rectHeight / 2);
context.rotate(deg);
context.beginPath();
context.fillRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight);
context.rotate(-deg);
context.translate(-(x + rectWidth / 2), -(y + rectHeight / 2));

或者

context.save();
context.translate(x + rectWidth / 2, y + rectHeight / 2);
context.rotate(deg);
context.beginPath();
context.fillRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight);
context.restore()

自己研究的，写的不是很专业 ， ~~有些东西自己表达的不是很清楚，见谅哈 

其他的问题，同一楼的，局部使用i时，请用var

您好：将canvas绘图的内容保存在本地我会在Canvas的第三课——Canvas的图像处理中做相应介绍。你可以查阅一下canvas的toDataURL这个API，是提供相关功能的。不过canvas本身对这个功能支持的并不那么好，一些注意事项还请关注我在后续课程中的讲解：）