canvas 时钟示例

最新推荐文章于 2017-07-18 16:19:10 发布

weixin_33704591

最新推荐文章于 2017-07-18 16:19:10 发布

阅读量79

点赞数

文章标签： python json

原文链接：https://my.oschina.net/lonelydawn/blog/806004

版权

2019独角兽企业重金招聘Python工程师标准>>>

贴代码，有注释

html节点

<canvas id="canvas1" width="400px" height="400px">
			当前浏览器不支持canvas,请更换浏览器
</canvas>
<canvas id="canvas2" width="400px" height="400px">
			当前浏览器不支持canvas,请更换浏览器
</canvas>
<canvas id="canvas3" width="400px" height="400px">
			当前浏览器不支持canvas,请更换浏览器
</canvas>

clock.js

/**
  * code by lonelydawn
  * 动态时钟效果
 **/


 //object   背景/表盘/刻度/指针

var clock=function(){
	//canvas.context
	var ctx;

	//默认画布尺寸size
	var size=400;
	var date=new Date();

	//表盘颜色
	var color;

	//json对象数组 ,保存时针、分针、秒针的属性
	var pointers=[];

	//标准API, target 目标节点, size 可选参数
	var getContext=function(target,width,height){
		target.width =width||target.width;
		target.height=height||target.height;

		return target.getContext("2d");
	};

	//模型宽高为size*size,根据所得宽高计算出比例以建立实际时钟
	var getScale=function(origin){
		return origin/size;
	};

	var getPointers=function(size){
		return [
			{
				"name"	:"hour-pointer",
				"number":0,
				"length":size*7/40,
				"width" :4,
				"angle"	:0
			},{
				"name"	:"minute-pointer",
				"number":0,
				"length":size*3/10,
				"width" :2,
				"angle"	:0
			},{
				"name"	:"second-pointer",
				"number":0,
				"length":size*3/8,
				"width" :1,
				"angle"	:0
			}
		]
	};

	//根据传参date获取时间指针属性
	var updatePointersProp=function(){

		pointers[0].number=date.getHours()%12+1;
		pointers[0].angle=30*(date.getHours()%12)+date.getMinutes()*0.5+date.getSeconds()*0.5/60;

		pointers[1].number=date.getMinutes();
		pointers[1].angle=date.getMinutes()*6+date.getSeconds()*0.1;

		pointers[2].number=date.getSeconds();
		pointers[2].angle=6*date.getSeconds();
	};

	//API:设置表盘颜色
	var setColor=function(cl){
		ctx.strokeStyle=cl;
		ctx.fillStyle=cl;
	};

	//绘制背景
	var drawBackground=function(){
		// ctx.save();
		ctx.fillStyle="#eee";
		ctx.fillRect(0,0,size,size);
		// ctx.restore();
	};
    
    //在个位数字前补0
	var fmtTime=function(num){
		return num<10?"0"+num:num;
	}

	//绘制时间文本
	var drawTime=function(){
		ctx.strokeText(fmtTime(date.getHours())+":"+fmtTime(date.getMinutes())+":"+
			fmtTime(date.getSeconds()),size/20,size/20);
	};

	//绘制表盘
	var drawTable=function(){
		//表盘轮廓
		ctx.beginPath();
		//arc() 参数为弧度
		ctx.arc(size/2,size/2,size*9/20,0,2*Math.PI);
		ctx.stroke();

		//中心圆点，固定红色
		ctx.beginPath();
		ctx.arc(size/2,size/2,5,0,2*Math.PI);
		ctx.closePath();

		ctx.save();

		ctx.fillStyle="#f00";
		ctx.fill();

		ctx.restore();
	};

	//绘制刻度
	var drawMark=function(){
		//固定值
		var r0=size*9/20,r1=size*7/16,r2=size*17/40;

		for(var i=0;i<60;i++){
			//位置会产生偏移，所以不采用模板设定
			/**
			 * flg作用:
			 * 当i 为15,30,45,0时，单独设置刻度;
			 * 为3的倍数时，设置为大刻度;
			 * 为其他值的时候，设置为小刻度
			**/
			var flg=(i==15||i==30||i==45||i==0)?i:(i%5+1);
			// alert(flg);
			switch(flg){
				case 15:
				ctx.strokeText(""+i/5,size/2+Math.sin(6*i*Math.PI/180)*r1-7,
					size/2-Math.cos(6*i*Math.PI/180)*r1+3);
				break;
				case 30:
				ctx.strokeText(""+i/5,size/2+Math.sin(6*i*Math.PI/180)*r1-1,
					size/2-Math.cos(6*i*Math.PI/180)*r1);
				break;
				case 45:
				ctx.strokeText(""+i/5,size/2+Math.sin(6*i*Math.PI/180)*r1,
					size/2-Math.cos(6*i*Math.PI/180)*r1+3);
				break;
				case 0:
				//比较特殊，0点的位置正好是12点
				ctx.strokeText(""+12,size/2+Math.sin(6*i*Math.PI/180)*r1-5,
					size/2-Math.cos(6*i*Math.PI/180)*r1+10);
				break;
				case 1:
				ctx.beginPath();
				ctx.moveTo(size/2+Math.sin(6*i*Math.PI/180)*r0,size/2-Math.cos(6*i*Math.PI/180)*r0);
				ctx.lineTo(size/2+Math.sin(6*i*Math.PI/180)*r2,size/2-Math.cos(6*i*Math.PI/180)*r2);
				ctx.stroke();
				break;
				default:
				ctx.beginPath();
				ctx.moveTo(size/2+Math.sin(6*i*Math.PI/180)*r1,size/2-Math.cos(6*i*Math.PI/180)*r1);
				ctx.lineTo(size/2+Math.sin(6*i*Math.PI/180)*r2,size/2-Math.cos(6*i*Math.PI/180)*r2);
				ctx.stroke();
				break;
			}
		}
	};

	//绘制指针
	var drawPointers=function(){
		for(var i=0;i<pointers.length;i++){
			ctx.beginPath();
			ctx.moveTo(size/2,size/2);
			ctx.lineTo(size/2+Math.sin(pointers[i].angle*Math.PI/180)*pointers[i].length,
				size/2-Math.cos(pointers[i].angle*Math.PI/180)*pointers[i].length);
			ctx.lineWidth=pointers[i].width;
			ctx.lineCap="round";
			ctx.stroke();
		}
	};

	//绘制全部元素
	var drawAll=function(){
		drawBackground();
		drawTime();
		drawTable();
		drawMark();
		drawPointers();
	};

	//API:创建静态表盘
	var init=function(target,s){
		//优先采用指定尺寸
		size=s||400;

		//内聚
		ctx=getContext(target,s,s);

		pointers=getPointers(s);
		updatePointersProp();
	};

	//target目标元素 width,height,color可选参数
	var buildStaticClock=function(target,size,color){
		init(target,size);

		if(color) setColor(color);

		drawAll();
	};

	//使指针运动
	var buildAnimateClock=function(target,size,color){
		init(target,size);
		if(color) setColor(color);

		//使时钟动起来
		setInterval(function(){
			date=new Date();
			updatePointersProp();
			drawAll();
		},1000);
	};

	//API:测试
	var foo=function(){
		//测试当前时间
		// alert("当前时间  "+hour_pointer.number+":"+
		// 	min_pointer.number+":"+sec_pointer.number);
		//测试时间时针
		// for(var i=0;i<24;i++){
		// 	alert((i)%12+1);
		// }
	};

	return {
		setColor:setColor,
		buildStaticClock:buildStaticClock,
		buildAnimateClock:buildAnimateClock,
		foo:foo
	};
};

/**
  * code by lonelydawn
 **/

//创建时钟表盘
var clock1=new clock();
var clock2=new clock();
var clock3=new clock();

//测试
clock1.foo();

// clock.setColor("#f00");
// clock.buildStaticClock(document.getElementById("canvas"),400,400);

//参数1,canvas节点;参数2,画布大小;参数3,钟表颜色
clock1.buildAnimateClock(document.getElementById("canvas1"),200,"#f00");

clock2.buildAnimateClock(document.getElementById("canvas2"),300,"#0f0");

clock3.buildAnimateClock(document.getElementById("canvas3"),400,"#00f");

运行结果：