JS+H5 Canvas实现时钟效果
2018-07-20 10:04
1136 查看
用JavaScript+Canvas来实现最简单的时钟效果,供大家参考,具体内容如下
效果图:
先看html代码:
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/demo3.js" ></script> </head> <body> <canvas id = "canvas"></canvas> </body> </html>
JavaScript代码:
var canvas,context; function draw(){//定义划时钟的方法 var data = new Date(); var hHoure = data.getHours(); var mMin = data.getMinutes(); var sSec = data.getSeconds(); var hValue = (hHoure*30+mMin/2-90)*Math.PI/180; var mValue = (mMin*6-90)*Math.PI/180; var sValue = (sSec*6 -90)*Math.PI/180; var x = 200,y = 200,r = 150; context.clearRect(0,0,canvas.width,canvas.height); context.moveTo(x,y); context.arc(x,y,r,0,6*Math.PI/180,false); // context.beginPath(); context.lineWidth = 1; for(var i = 0;i<60;i++){ context.moveTo(x,y); context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } context.closePath(); context.stroke(); // context.beginPath(); context.fillStyle = "white"; context.moveTo(x,y); context.arc(x,y,r/1.1,-0,2*Math.PI,false); context.closePath(); context.fill(); // context.beginPath(); context.lineWidth = 3; for(var i = 0;i<12;i++){ context.moveTo(x,y); context.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI,false); } context.closePath(); context.stroke(); // context.beginPath(); context.fillStyle = "white"; context.moveTo(x,y); context.arc(x,y,r/1.12,0,2*Math.PI,false); context.closePath(); context.fill(); context.beginPath(); context.fillStyle = "black"; context.moveTo(x,y); context.arc(x,y,r/30,0,2*Math.PI,false); context.fill(); // context.beginPath(); context.lineWidth = 5; context.moveTo(x,y); context.arc(x,y,r/2.5,hValue,hValue,false); context.stroke(); // context.beginPath(); context.lineWidth = 3; context.moveTo(x,y); context.arc(x,y,r/2,mValue,mValue,false); context.stroke(); // context.beginPath(); context.lineWidth = 2; context.moveTo(x,y); context.arc(x,y,r/1.6,sValue,sValue,false); context.stroke(); } window.onload = function(){ canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); canvas.height = 500; canvas.width = 500; setInterval(draw,1000); draw(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- js canvas实现红包照片效果
- 使用CSS和Js实现时钟效果
- canvas实现粒子时钟效果
- js+SVG实现动态时钟效果
- iosselect:一个js picker项目,在H5中实现IOS的select下拉框效果
- js 实现一个非常漂亮的3D立体旋转效果h5
- 用HTML5的canvas实现一个炫酷时钟效果
- js时钟翻牌效果实现代码分享
- 用js实现的时钟效果
- js实现的奥运倒计时时钟效果代码
- js实现朴素的时钟,效果:(2010年6月22日 11:00:08)
- JS+html5 canvas实现的简单绘制折线图效果示例
- js时钟翻牌效果实现代码分享
- JS+Canvas绘制动态时钟效果
- Js用Canvas实现简单时钟
- H5使用canvas实现星星闪烁效果
- JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
- jquery插件canvaspercent.js实现百分比圆饼效果
- js实现Form栏显示全格式时间时钟效果代码
- 使用particles.js实现知乎首页Canvas粒子效果,多边形,圆形粒子