基本信息

---

下载

   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

---

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

支付宝支付

微信支付

   源码介绍

---

canvas钟表插件

window.Clock=function(options){
		this.config={
			id:'myCanvas',
			width:600,
			height:600,
			clockOuterColor:'black',
			outerBorderWidth:5,
			hourDialColor:'black',
			hourDialWidth:5,
			minuteDialColor:'red',
			minuteDialWidth:4,
			hourDynamicPointerColor:'red',
			hourDynamicPointerWidth:'5',
			minuteDynamicPointerColor:'green',
			minuteDynamicPointerWidth:'5',
			secondDynamicPointerColor:'black',
			secondDynamicPointerWidth:'5',
			onInit:'',
			onProgress:''
		}
		
		for(var i in options){
			this.config[i]=options[i];			
		}
		
		var canvas=document.createElement('canvas');
		canvas.style.border='1px solid #acacac';
		canvas.id=this.config.id;
		canvas.width=this.config.width;
		canvas.height=this.config.height;
		document.body.appendChild(canvas);
		this.context=canvas.getContext('2d');	
		this.radius=Math.min(canvas.width/2,canvas.height/2);
		
		
		this.startTimer();
		if(typeof this.config.onInit == "function"){
			this.config.onInit();
		}
	};
	window.Clock.prototype={
		init:function(){
			this.context.clearRect(0,0,this.config.width,this.config.height)
			this.context.save();
			//先偏移，再旋转
			this.context.translate(this.config.width/2,this.config.height/2);
			this.context.rotate(-Math.PI/2);
			this.context.scale(0.95,0.95);
			this.context.save();				
		},
		//绘制外边框
		drawOuterBorder:function(){
			this.context.beginPath();
			this.context.strokeStyle=this.config.clockOuterColor;
			this.context.lineWidth=this.config.outerBorderWidth;
			this.context.arc(0,0,this.radius,0,Math.PI*2);
			this.context.stroke();
			this.context.restore();
			this.context.save();
		},
		drawNumber: function(){