这是四个点，下面（横坐标是-2到2）宽一点，上面（横坐标是-1到1）窄一点，填充过后就形成了类似三角形的秒针

按F12打开浏览器的开发者工具，就能看到报错，你把“Math”写成“Matn”了

浏览器不支持吧，我这里可以正常显示画框

没有调用drawBackground方法

原点跟css 一样在左上角因此往右往下为正,往左往上为负

已解决，是我的js文件第三行代码没有正确获取到dom的上下文，写成了document

关联文件？js和html？

试着改单括号是试试

因为dom节点里没有canvas的绘制方法,ctx上下文对象里封装了canvas的绘制方法,  这里是 2D 绘图上下文,可以绘制简单的 2D 图形,除了2D绘图上下文,还有WebGL 上下文用于绘制3D图形

1. 像素,原canvas框宽高为200px,圆半径r 为100px,要减去外圆10px,以及时针要短一点所以r 减去30
   

2. 整点数字的x位置 = Math.cos(rad)*(r-30); y位置 = Math.sin(rad)*(r-30); 
   rad的设置 var rad = 2*Math.PI /12 * i; 因程式不接受角度,只接受弧度,因此每个整点的弧度为 2 pi /12 ==>每个整点弧度  * i (顺序从3开始)

3. function(number,i) , number 指 var hourNumber=[3,4,5,6,7,8,9,10,11,12,1,2]; i 指的是 1~12 的顺序

http://www.w3school.com.cn/这个网站

了解下 Array.forEach() 

宽度好像可以直接写 var width = canvas.width;  不用那么麻烦

转动的中心是坐标零点，在旋转之前，需要将圆点设置好。

用ctv.translate(x,y)设置

浏览器的执行顺序是从上到下加载解析的，放在head的js文件会比body中的html元素优先执行，此时canvas元素还未被浏览器解析渲染出来，所以没有效果

可以在将代码放在

 window.onload = function () {

    // 具体代码

}

中，这样就能保证js文件先执行也能渲染出时钟

是将整个画布清空再重新画出的,0,0是从这个矩形的x,y轴坐标都为零的点，也就是左上角开始清空整个画布,因为之前设置的背景之类的已经保存过 所以每次清空重画的就是秒针分针时针

clearRect(x,y,width,height)这四个是必选的参数

没给宽高呀。 div给个宽高就好了

sublime text3,挺好用得

drawHour(4);改为drawHour(4，30);

因为你把垂直和水平对齐放到了循环里面，导致第一次填充数字的时候是先填充后对齐所以没用，要把对齐放到循环上面

如果删除了，那么第一秒出现的是空白，过了一秒（1000毫秒）之后才会出现时钟。所以为了防止出现断层，一开始先把时钟画上去。我是这么理解的。

问题找到了，ctx打成stx了，粗心呐

代码贴出来

是不是在setInterval(draw,1000);之前没有写上draw();的缘故啊？

不应该  这个上面的不存在兼容性问题 应该是你哪里敲错了

已经解决了，谢谢。画布宽高设置错了。写成css样式了

1.

2.

3.

4.