window.addEventListener("load", function(){ context = document.getElementById("myCanvas").getContext("2d"); (context){ //开始一个新的子路径 context.beginPath(); context.arc(100,100,99,0,2*Math.PI,false); //以某种很好看的蓝色填充 context.fillStyle = "#315f9b"; context.fill(); //画大圆的边线 context.stroke(); context.beginPath(); //将开始点移动到(194,100)，用半径和圆心计算得出的点 context.moveTo(194,100); //画内部的小圆（圆神？） context.arc(100,100,94,0,2*Math.PI,false); //用另一种很好看的稍浅蓝色填充内部小圆 context.fillStyle = "#4ba2cf"; context.fill(); context.stroke(); image = new Image(); image.src = "2.png"; //用上下文的方法drawImage将图片从点(25,25)开始画，画在边长150的矩形中 context.drawImage(image,25,25,150,150); context.translate(100,100); //用一个同样很好看的蓝色来画我们的时间点 context.fillStyle = "#02285a"; context.fillText("12",-5,-80); context.fillText("6",-4,87); context.fillText("3",80,1); context.fillText("9",-86,1); //稍候详述此函数 nowTime(context); } },false);

以上时钟的表盘都出现了，但是时钟之所以为时钟最重要的就是它能显示时间啊（废话），所以接下来就是画指针咯

nowTime函数部分