首页 > 代码库 > canvas 之 - 精灵 钟表动画
canvas 之 - 精灵 钟表动画
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#canvas { border:solid 1px #ccc;}</style></head><script src="sprite.js"></script><body><canvas id="canvas" width="600" height="600"></canvas><script> var canvas = document.getElementById("canvas");var context = canvas.getContext("2d"),CLOCK_RADIUS = canvas.width/2 -15 ,hour_hand_truncation =35, ballPainter = { //画小球 paint:function(sprite,context){ var x =sprite.left +sprite.width/2, y = sprite.top +sprite.height/2, width = sprite.width, height = sprite.height, radius = sprite.width/2; context.save(); context.beginPath(); context.arc(x,y,radius,0,Math.PI*2,false); context.clip(); context.shadowColor = "rgb(0,0,0)"; context.shadowOffsetX = -4; context.shadowOffsetY = -4; context.shadowBlur = 8; context.fillStyle = "rgba(218,165,32,0.1)"; context.fill(); context.lineWidth =2; context.strokeStyle = "rgb(100,100,195)"; context.stroke(); context.restore(); } },ball = new Sprite("ball",ballPainter);// 画网格 function drawGrid(color,stepx,stepy){ context.strokeStyle = color; context.lineWidth =0.5; for(var i =stepx +0.5;i<canvas.width;i+=stepx){ context.beginPath(); context.moveTo(i,0); context.lineTo(i,canvas.height); context.stroke(); } for(var i =stepx +0.5;i<canvas.height;i+=stepx){ context.beginPath(); context.moveTo(0,i); context.lineTo(canvas.width,i); context.stroke(); } }//画指针函数 function drawHand(loc,isHour){ var angle = (Math.PI *2 )*(loc/60) - Math.PI/2, handRadius = isHour ? CLOCK_RADIUS - hour_hand_truncation : CLOCK_RADIUS, lineEnd = { x:canvas.width/2 + Math.cos(angle)*(handRadius - ball.width /2), y:canvas.height/2 +Math.sin(angle)*(handRadius - ball.width /2) }; context.beginPath(); context.moveTo(canvas.width/2,canvas.height/2); context.lineTo(lineEnd.x , lineEnd.y); context.stroke(); ball.left = canvas.width/2 + Math.cos(angle)*handRadius - ball.width/2; ball.top = canvas.height/2 + Math.sin(angle)*handRadius - ball.height/2; ball.paint(context);}function drawClock (){ drawClockFace(); drawHands(); }// 画多个指针function drawHands(){ var date = new Date(), hour = date.getHours(); ball.width = 20; ball.height =20; drawHand(date.getSeconds(),false); hour = hour >12 ? hour -12 :hour ; ball.width = 35; ball.height = 35 ; drawHand(date.getMinutes() ,false ); ball.width =50; ball.height =50; drawHand(hour*5 +(date.getMinutes()/60)*5); ball.width =10; ball.height =10 ; ball.left = canvas.width/2 - ball.width/2; ball.top = canvas.height /2 - ball.height/2 ; ballPainter.paint(ball,context); }// 画表盘function drawClockFace(){ context.beginPath(); context.arc(canvas.width/2,canvas.height/2,CLOCK_RADIUS,0,Math.PI*2,false ); context.save(); context.strokeStyle = "rgba(0,0,0,0.2)"; context.stroke(); context.restore(); }// 运动函数 function animate(){ context.clearRect(0,0,canvas.width,canvas.height); drawGrid("lightgray",10,10); drawClock(); window.requestNextAnimationFrame(animate); }context.lineWidth =0.5;context.strokeStyle = "rgba(0,0,0,0.2)";context.shadowColor = "rgba(0,0,0,0.5)";context.shadowOffsetX =2;context.shadowOffsetY = 2;context.shadowBlur =4;context.stroke();window.requestNextAnimationFrame(animate);drawGrid("lightgray",10,10);</script></body></html>
sprite js
var Sprite = function (name,painter,behaviors){ if(name!== undefined){this.name = name } if(painter!== undefined){this.painter = painter} this.top =0; this.left =0; this.width =10; this.height = 10; this.velocityX = 0; this.velocityY =0; this.visible = true; this.animating = false ; this.behaviors = behaviors || [] ; return this ;} Sprite.prototype = { paint:function (context){ if(this.painter !== undefined && this.visible){ this.painter.paint(this,context); } }, update:function(context,time){ for(var i=0;i<this.behaviors.length;++i){ this.behaviors[i].execute(this,context,time); } } }window.requestNextAnimationFrame = (function(){ var originalWebkitMethod, wrapper = undefined,callback = undefined, geckoVersion = 0 , userAgent = navigator.userAgent, index =0 , self =this; if(window.webkitRequestAnimationFrame){ wrapper = function (time){ if(time === undefined ){ time = +new Date(); } self.callback(time); }; originalWebkitMethod = window.webkitRequestAnimationFrame; window.webkitRequestAnimationFrame = function (callback,element){ self.callback = callback ; originalWebkitMethod(wrapper,element); } } if(window.mozRequestAnimationFrame){ index = userAgent.indexOf("rv:"); if(userAgent.indexOf("GecKo") != -1){ geckoVersion = userAgent.substr(index +3 ,3); if(geckoVersion ==="2.0"){ window.mozRequestAnimationFrame = undefined ; } } }return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||window.msRequestAnimationFrame || function (callback,element){ var start,finish; window.setTimeout(function(){ start = +new Date(); callback(start); finish = +new Date(); self.timeout = 1000/60 - (finish -start); },self.timeout); } })() // JavaScript Document
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。