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 很不错，当然也要感谢慕课提供这么好的课程！