升级浏览器吧~

获取画布上下文 var context = document.getElementById("myCanvas").getContext("2d"); //判断上下文是否存在，存在则可以执行接下来的代码 if(context){ //开始一个新的子路径 context.beginPath();

//我们准备画两个同心圆作为时钟的边框
//画一个外面的大圆
context.arc(100,100,99,2*Math.PI,false);
//以某种很好看的蓝色填充
context.fillStyle = "#315f9b";
context.fill();
//画大圆的边线
context.stroke();
//开始一条新的子路径，
//此处是必须的，要不然之后填充的颜色会把之前的全部覆盖
context.beginPath();
//将开始点移动到(194,100)，用半径和圆心计算得出的点
context.moveTo(194,100);
//画内部的小圆（圆神？）
context.arc(100,94,false);
//用另一种很好看的稍浅蓝色填充内部小圆
context.fillStyle = "#4ba2cf";
context.fill();
context.stroke();
//蓝胖子出现啦~
//创建一个Image对象，将它的src设置为蓝胖子的图片
var image = new Image();
image.src = "2.png";
//用上下文的方法drawImage将图片从点(25,25)开始画，画在边长150的矩形中
context.drawImage(image,25,150,150);
//移动变换矩阵
//移动后(100,100)作为新的原点，即(0,0)
context.translate(100,100);
//用一个同样很好看的蓝色来画我们的时间点
context.fillStyle = "#02285a";
//fillText第一个参数为要画的字符串，第二个参数为x，第三为y
//以下x,y值是调试后的效果，大家根据不同情况，再做调整哦
context.fillText("12",-5,-80);
context.fillText("6",-4,87);
context.fillText("3",80,1);
context.fillText("9",-86,1);
//稍候详述此函数
nowTime(context);
}
},false);

= 12){ myHour = myHour-12; } var myMin = myDate.getMinutes(); var mySec = myDate.getSeconds(); //描绘小时 //用来存放当前小时在表盘上的弧度 var hourArc; //以3时作为圆周的起点，顺时针表示弧度 if(myHour < 3){ hourArc = 2*Math.PI-(3-myHour)*Math.PI/6; }else{ hourArc = (myHour-3)*Math.PI/6; } //当指向3,6,9,12时，正好为90°的倍数 //此处因为角度转换为弧度有偏差，所以特别处理下 switch(myHour){ case 0: hourArc = Math.PI*3/2;break; case 3: hourArc = 0;break; case 6: hourArc = Math.PI/2;break; case 9: hourArc = Math.PI;break; } //调用drawTime函数，在表盘上画出小时针 drawTime(context,hourArc,60); //描绘分钟 //用来存放当前分钟在表盘上的弧度 var minArc; //以15分作为圆周的起点，顺时针表示弧度 if(myMin < 15){ minArc = 2*Math.PI-(15-myMin)*Math.PI/30; }else{ minArc = (myMin-15)*Math.PI/30; } //处理分钟，依然是此处因为角度转换为弧度有偏差，所以特别处理下 switch(myMin){ case 0: minArc = Math.PI*3/2;break; case 15: minArc = 0;break; case 30: minArc = Math.PI/2;break; case 45: minArc = Math.PI;break; } //调用drawTime函数，在表盘上画出分钟针 drawTime(context,minArc,80); //描绘秒钟 //用来存放当前秒钟在表盘上的弧度 var secArc; //以15秒作为圆周的起点，顺时针表示弧度 if(mySec < 15){ secArc = 2*Math.PI-(15-mySec)*Math.PI/30; }else{ secArc = (mySec-15)*Math.PI/30; } //处理秒钟，依然依然此处因为角度转换为弧度有偏差，所以特别处理下 switch(mySec){ case 0: secArc = Math.PI*3/2;break; case 14: secArc = 0;break; case 29: secArc = Math.PI/2;break; case 44: secArc = Math.PI;break; } //调用drawTime函数，在表盘上画出小时针 drawTime(context,secArc,"red"); //设置一个超时调用函数，每一秒超时调用nowTime更新时钟 setTimeout(function(){ //调用画新的指针前，当然应该要清除下原来的时针吧，用clearTime函数，真的好用！ clearTime(context); //把闲杂指针清除了，再画一次当前的指针吧~ nowTime(context); },1000); }

方法配合使用能够恢复画布上下文 context.save(); //旋转画布，rotate传入的参数代表旋转的弧度 context.rotate(theArc); //开始一条新的子路径，我们开始画指针啦 context.beginPath(); //将开始点移动到(0,0) context.moveTo(0,0); //画一条到(theLength,0)的路径 context.lineTo(theLength,0); //用指定的color颜色画这条路径 context.strokeStyle = color; //路径的宽度为2 context.lineWidth = 2; //路径是不可见的，如果要看到路径，需要用stroke来描线，而如何描这条线，可以由我们以上用到的几个属性来定义 context.stroke(); //恢复上下文 context.restore(); }

修改了变换矩阵，还记得吗？所以，它们的坐标应该是互补的 context.drawImage(image,-75,150); }