1. 将 "WINDIW_HEIGHT = document.body.clientHeight;" 改成   "WINDIW_HEIGHT += document.body.clientHeight;" 

   

2. 或 改成 WINDIW_HEIGHT = document.documentElement.clientHeight ;

   
   

那是因为画圆的时候你是很多个圆，循环一次就必须要有一次beginPath()和closePath()

不写也可以，比如0.5×3.14等于1.57,你写1.57效果也是一样的，canvas里的角度是以PI（π）为单位的，你可以把一个PI理解为180度，用Math.PI只是方便你记住并表示0度、90度、180度、270度、360度的值

圆心坐标位置是相对于整个canvas画布的吧，看一下你的画布，是相对于整个浏览器的什么位置。应该没有问题的

在Canvas上绘制多少图形，Canvas都是一个整体，绘画的图形是Canvas的一部分，不能单独获取，所以无法直接给某个图形增加JavaScript事件。可以通过给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。鼠标点击了在了这个范围内，视为点击了这个图形。可以一定程度的上的达到效果

所有需要操作的行为都应该放在stroke前面，就好像，在一张纸上画图一样，画完了就没办法改了。

对的，要看边框的颜色

看一下5-3，倒计时的endTime是否更改

如还是不行，请具体描述一下问题细节，现在的描述太过笼统，根本无法判断原因

同问。

PI表示180度，（i+1）/10表示圆的几分之几

绘制的起点是0；绘制的重点是2*Math.PI*(i+1)*10;

【先在纸上画一个整圆，以原点为圆心分别化出x轴、y轴；然后描出起点和终点。之后顺时针连线或者逆时针连线。】

当x=0时（也就是第一个图案）；起点(0),   终点（1/10个2*Math.PI）

当x=1时（也就是第一个图案）；起点(0),   终点（1/5个2*Math.PI）

当x=2时（也就是第一个图案）；起点(0),   终点（3/10个2*Math.PI）

...

当x=5时（也就是第一个图案）；起点(0),   终点（1/2个2*Math.PI）【这时候无论顺逆时针都是半圆】

...

当x=9时（也就是第一个图案）；起点(0),   终点（1个2*Math.PI）【这时候无论顺逆时针都是整圆】

如图，以此类推。

难道是我平板播放比例的问题？

context.lindewidth 把线条粗细改变一下试试

是在canvas,不写单位就是默认大小

你的y轴坐标重复了 ，因为canvar是不会占用空间的，你三个循环都在同一坐标ctx.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10); ／／哪个50+i*100是x轴 ，60是y轴，因为重复所有重叠在一起了

你的代码呢？

我尝试着复制了你的代码，在我这里是填充完整的。

程序执行是有顺序的啊，如果你设置的样式重复的话，会显示后者

个人感觉Sublime Text 就够用了

多敲些基础练习,加上注释和思路 慢慢就会好了

那就先看基础嘛，别一上来就看这么复杂的内容。

beginPath决定是不是新的一段路径，closePath决定路径是不是封闭，让线条和圆弧独立，就分别设置beginPath;让线条结束设置closePath,圆弧不封闭就不设置closePath;

context.beginPath();
context.moveTo(100,100);
context.lineTo(200,200);
context.closePath();

context.lineWidth = 2;
context.strokeStyle = "green";
context.stroke();

context.beginPath();
context.arc(400,400,100,0,1.5*Math.PI,false);
context.strokeStyle = "red";
context.stroke();

哦哦 我找到原因了，原来是初始圆心的坐标在一起，所以 两排 重叠了

webstorm

工具都挺多的呀，适合自己就好了。老师这里用的是WebStorm

你的arc方法写错了，应该是context.arc(100,100,0,1.5*Math.PI,false) 而不是arc = (....)

老师讲的比较细致，必须点赞

最后一节视频右下方

初始y坐标都没变，当然画一起去了

把第三行context.stroke()与第四行context.closePath()的顺序转过来就行，如下：

context.beginPath()

context.arc(300,300,200,0,0.5*Math.PI)

context.closePath()

context.stroke()

这样最后就会闭合路径