canvas 时钟示例
2018-03-23 16:41
183 查看
贴代码,有注释
html节点
clock.js
运行结果:
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=func a136 tion(){ 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");
运行结果:
相关文章推荐
- canvas 时钟示例
- html5 canvas 画时钟
- android 用canvas 绘制简单圆形时钟
- python控制台显示时钟的示例
- Canvas时钟特效-JS效果
- HTML5 Canvas 小例子 旋转的时钟
- 用 Canvas 绘制实时时钟
- HTML5 Canvas 练习(简单时钟)
- HTML5---canvas 指针时钟-clock
- HreoWinGauge2.0组件集应用示例----时钟(1)
- 玩转html5(四)----使用canvas画一个时钟(可以动的哦!)
- Canvas--时钟
- 使用canvas绘制时钟
- 自己做个时钟-html5的canvas
- javascript结合canvas标签做出来的时钟效果
- 用canvas 写时钟程序时遇到的API
- 通过html5 canvas绘制时钟
- 轻松实现HTML5时钟(分享下自己对canvas的理解,原来没你想像的那么难哦)
- HTML5-炫丽的时钟效果Canvas绘图与动画
- j2me中使用canvas设置背景颜色示例