Duang!!! Dog 时钟 （Canvas）

看了慕课的Canvas时钟教程，一时技痒，于是动手做了一个狗哥Canvas时钟，这里说一下与课程不同的地方吧，首先我用了狗哥当背景，其次课程里的时、分刻度用的是Canvas的 ARC（）画出的圆点，我将他改成了矩形。第三点，表盘上添加文本和阿拉伯数字时间显示，至于各种填充颜色（外边框，时针分针秒针）均使用了 strokeStyle 。

背景代码段：

 ctx.beginPath();
 var img = new Image();
 img.src='dog.jpeg';
 ctx.drawImage(img,-100*rem,-100*rem,200*rem,200*rem);

时、分刻度代码段：

for(var i=0;i<60;i++){
     ctx.save();
     ctx.lineWidth = 3*rem;
     //ctx.translate(r, r);
     var rad= 2*Math.PI/60*i
     ctx.rotate(rad);
     ctx.beginPath();
     if(i%5===0){
  ctx.strokeStyle= '#000';
  ctx.moveTo(0, -85*rem);
  ctx.lineTo(0, -95*rem);

     }else{
  ctx.strokeStyle = "#FFFF00";
  ctx.moveTo(0, -88*rem);
  ctx.lineTo(0, -95*rem);
     }
     ctx.stroke();
     ctx.restore();
 }

文本和阿拉伯数字时间显示代码段：

    function drawDog(){
 ctx.save()
 ctx.beginPath();
 ctx.font =12*rem+'px Arial';
 ctx.fillStyle = '#7fff00';
 ctx.fillText('Duang! Dog',0,25*rem);
 ctx.fill();
 ctx.restore();
    }
    function drawTime(hour,min){
 ctx.save()
 ctx.beginPath();
 ctx.font =12*rem+'px Arial';
 ctx.fillStyle = '#3d59ab';
 //var str = hour>10?hour:('0'+hour)+":"+(min>10?min:('0'+min));
 var str = hour > 10 ? hour : ("0" + hour) + ":" + (min > 10 ? min : ("0" + min));
 var str_min =  ":" + (min > 10 ? min : ("0" + min))
 console.log(str)
 ctx.fillText(str+str_min,0,40*rem);
 ctx.fill();
 ctx.restore();
    }

演示地址：https://marlborokay.github.io/Canvas-Clock/

下载地址：https://github.com/marlboroKay/Canvas-Clock

真心觉得Canvas 很不错，当然也要感谢慕课提供这么好的课程！