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

原创

科技之巅 2024-03-21 20:52:55 博主文章分类：代码艺术 ©著作权

©著作权归作者所有：来自51CTO博客作者科技之巅的原创作品，请联系作者获取转载授权，否则将追究法律责任

【效果】

【Canvas与艺术】绘制一款色彩斑斓的调色盘状时钟表盘_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>

【参照的原型】

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