【Canvas与艺术】绘制一款色彩斑斓的调色盘状时钟表盘

【效果】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>调色盘时钟表</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body onload="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="512px" height="512px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 边长
const LENGTH=512;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(LENGTH/2,LENGTH/2);// 原点平移到画布中央

    // 准备
    stage=new Stage();    
    stage.init();
}

// 每一秒调用paintClock函数
setInterval(paintClock,1000);

//-------------------------------
// 绘制时钟
//-------------------------------
function paintClock(){
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     
}

// 舞台类
function Stage(){

    // 初始化
    this.init=function(){

    }

    // 更新
    this.update=function(){

    }

    // 画背景
    this.paintBg=function(ctx){
        ctx.clearRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏

        // 黑圈
        ctx.strokeStyle="black";
        ctx.lineWidth=6;
        ctx.beginPath();
        ctx.arc(0,0,250,0,2*Math.PI,true);
        ctx.closePath();
        ctx.stroke();
        
        // 橙圈
        ctx.strokeStyle="orange";
        ctx.lineWidth=6;
        ctx.beginPath();
        ctx.arc(0,0,244,0,2*Math.PI,true);
        ctx.closePath();
        ctx.stroke();

        // 画十二块调色盘
        var colors=["rgb(228,130,18)","rgb(60,94,136)","rgb(50,143,151)","rgb(88,193,215)",
        "rgb(36,141,126)","rgb(137,99,142)","rgb(198,203,47)","rgb(21,152,205)",
        "rgb(221,188,24)","rgb(57,93,137)","rgb(196,204,28)","rgb(195,33,24)"];
        ctx.strokeStyle="white";
        ctx.lineWidth=4;

        const r1=140;
        const r2=240;
        for(var i=0;i<12;i++){
            var startAngle=Math.PI/12+i*Math.PI/6-Math.PI/2;
            var endAngle=startAngle+Math.PI/6;

            var xs1=r1*Math.cos(startAngle);
            var ys1=r1*Math.sin(startAngle);
            var xs2=r2*Math.cos(startAngle);
            var ys2=r2*Math.sin(startAngle);

            var xe1=r1*Math.cos(endAngle);
            var ye1=r1*Math.sin(endAngle);
            var xe2=r2*Math.cos(endAngle);
            var ye2=r2*Math.sin(endAngle);

            ctx.beginPath();
            ctx.moveTo(xs1,ys1);
            ctx.lineTo(xs2,ys2);
            ctx.arc(0,0,r2,startAngle,endAngle,false);
            ctx.lineTo(xe2,ye2);
            ctx.lineTo(xe1,ye1);
            ctx.arc(0,0,r1,endAngle,startAngle,true);
            ctx.closePath();
            ctx.stroke();
            ctx.fillStyle=colors[i];
            ctx.fill();
        }

        // 写小时数
        var hours=["3","4","5","6","7","8","9","10","11","12","1","2"];
        for(var i=0;i<12;i++){
            var theta=Math.PI/6*i;
            var x=180*Math.cos(theta);
            var y=180*Math.sin(theta);

            ctx.fillStyle="white";
            ctx.font="30px Arial";
            ctx.textAlign="center";
            ctx.textBaseLine="Middle";
            ctx.fillText(hours[i],x,y+12);
        }

        // 写分钟刻度
        for(var i=1;i<61;i++){
            var theta=i*Math.PI/30-Math.PI/2;
            var x=220*Math.cos(theta);
            var y=220*Math.sin(theta);

            if((i % 5)==0){
                ctx.fillStyle="red";
                ctx.beginPath();
                ctx.arc(x,y-3,8,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();
            }

            ctx.fillStyle="white";
            ctx.font="8px Arial";
            ctx.textAlign="center";
            ctx.textBaseLine="Middle";
            ctx.fillText(i,x,y);
        }

        // 内橙圈
        ctx.fillStyle="rgb(245,167,59)";
        ctx.beginPath();
        ctx.arc(0,0,138,0,2*Math.PI,true);
        ctx.closePath();
        ctx.fill();

        // 内圈刻度
        for(var i=0;i<60;i++){
            var theta=i*Math.PI/30;
            var x1=134*Math.cos(theta);
            var y1=134*Math.sin(theta);
            var x2=130*Math.cos(theta);
            var y2=130*Math.sin(theta);

            ctx.lineWidth=1;
            ctx.strokeStyle="black";
            ctx.beginPath();
            ctx.moveTo(x1,y1);
            ctx.lineTo(x2,y2);
            ctx.closePath();
            ctx.stroke();
        }

        // 内圈小时数
        var innerHours=["15","16","17","18","19","20","21","22","23","24","13","14"];
        for(var i=0;i<12;i++){
            var theta=Math.PI/6*i;
            var x=120*Math.cos(theta);
            var y=120*Math.sin(theta);

            ctx.fillStyle="black";
            ctx.font="10px Arial";
            ctx.textAlign="center";
            ctx.textBaseLine="Middle";
            ctx.fillText(innerHours[i],x,y+4);
        }

        // 内天蓝圈
        ctx.fillStyle="rgb(83,194,214)";
        ctx.beginPath();
        ctx.arc(0,0,80,0,2*Math.PI,true);
        ctx.closePath();
        ctx.fill();
    }

    // 画前景
    this.paintFg=function(ctx){
        // 得到当前时间
        var now=new Date();
        var s=now.getSeconds();
        var m=now.getMinutes();
        var h=now.getHours()+m/60;

        // 画时针
        ctx.save();
        ctx.rotate(h*Math.PI/6);
        ctx.strokeStyle="#060000";
        ctx.lineWidth=6;
        ctx.lineCap="round";
        ctx.beginPath();
        ctx.moveTo(0,20);
        ctx.lineTo(0,-150);
        ctx.closePath();
        ctx.stroke();
        ctx.restore();

        // 画分针
        ctx.save();
        ctx.rotate(m*Math.PI/30);
        ctx.lineWidth=4;
        ctx.lineCap="round";
        ctx.beginPath();
        ctx.moveTo(0,20);
        ctx.lineTo(0,-200);
        ctx.closePath();
        ctx.strokeStyle="#060000";
        ctx.stroke();
        ctx.restore();

        // 画秒针
        ctx.save();
        ctx.rotate(s*Math.PI/30-Math.PI/2);
        ctx.beginPath();
        ctx.moveTo(200,0);
        ctx.lineTo(-20,-3);
        ctx.lineTo(-20,-5);
        ctx.lineTo(-30,-5);
        ctx.lineTo(-30,5);
        ctx.lineTo(-20,5);
        ctx.lineTo(-20,3);
        ctx.closePath();
        ctx.fillStyle="#060000";
        ctx.fill();
        ctx.restore();

        // 画小圆点
        ctx.save();
        ctx.beginPath();
        ctx.arc(0,0,5,0,2*Math.PI,true);
        ctx.closePath();
        ctx.strokeStyle="#060000";
        ctx.fillStyle="rgb(216,185,138)";
        ctx.fill();    
        ctx.stroke();
        ctx.restore();
    }
}
//-->
</script>