小程序快速开发_JS+Canvas绘制动态时钟效果

2021-01-11 13:09| 发布者: | 查看: |

JS+Canvas绘制动态时钟效果       这篇文章主要为大家详细介绍了JS+Canvas绘制动态时钟效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Canvas绘制动态时钟效果展示的具体代码,供大家参考,具体内容如下

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" / 
 title /title 
 style 
 #mycanvas{ 
 position: absolute; 
 left:50%; 
 margin-left:-250px; 
 border:5px solid #fff; 
 box-shadow: 0 0 10px rgba(0,0,0,0.2); 
 background-color: rgb(58, 179, 255); 
 /style 
 /head 
 body 
 !-- 
 canvas:html5新增的画布对象,可以在其中绘制任何的图形,以及线条效果,包括图片 
 注意canvas的尺寸应该通过元素的属性直接设置,而不是使用样式实现(失帧) 
 canvas id="mycanvas" width="500px" height="500px" 您的浏览器太low了,请切换 /canvas 
 script 
 //获取画布对象 
 var mycanvas = document.getElementById('mycanvas'); 
 //获取一个2d绘图环境(拿到一支画笔) 
 var ctx = mycanvas.getContext('2d'); 
 function draw(){ 
 //获取系统时间 
 var nowTime = new Date(); 
 var hours = nowTime.getHours();//获取时 
 var minutes = nowTime.getMinutes();//获取分 
 var seconds = nowTime.getSeconds();//获取秒 
 //防止小时超过12 
 hours = hours 12 hours-12 : hours; 
 //精准设置小时值 
 hours = hours + minutes/60; 
 //清除画布(防止覆盖) 
 ctx.clearRect(0,0,500,500); 
 //初始化画笔的样式 
 ctx.lineWidth = 5; //设置线条的宽度 
 ctx.strokeStyle = '#fff'; //设置线条颜色 
 ctx.beginPath();//开始新的绘图路径 
 //设置一个圆形路径 
 ctx.arc(250,250,150,0,360,false); 
 //绘制图形 
 ctx.stroke(); 
 ctx.closePath();//结束当前绘图路径 
 //绘制刻度(时刻度) 
 for(var i = 0;i i++){ 
 ctx.beginPath(); 
 ctx.lineWidth = 10; 
 //保存当前绘图环境 
 ctx.save(); 
 //重置绘制起始位置(将圆心位置重置为0,0) 
 ctx.translate(250,250); 
 //旋转画布到一定的弧度 弧度=角度*PI/180 
 ctx.rotate(i * 30 * Math.PI / 180); 
 //设置绘制线条的起始位置 
 ctx.moveTo(0,140); 
 //设置线条的结束位置 
 ctx.lineTo(0,150); 
 //绘制路径 
 ctx.stroke(); 
 //还原初始的绘图环境 
 ctx.restore(); 
 ctx.closePath(); 
 //绘制刻度(分刻度) 
 for(var i = 0;i i++){ 
 ctx.beginPath(); 
 ctx.lineWidth = 3; 
 //保存当前绘图环境 
 ctx.save(); 
 //重置绘制起始位置(将圆心位置重置为0,0) 
 ctx.translate(250,250); 
 //旋转画布到一定的弧度 弧度=角度*PI/180 
 ctx.rotate(i * 6 * Math.PI / 180); 
 //设置绘制线条的起始位置 
 ctx.moveTo(0,142); 
 //设置线条的结束位置 
 ctx.lineTo(0,146); 
 //绘制路径 
 ctx.stroke(); 
 //还原初始的绘图环境 
 ctx.restore(); 
 ctx.closePath(); 
 /*绘制时针*/ 
 ctx.beginPath(); 
 ctx.lineWidth = 5; 
 //保存当前绘图环境 
 ctx.save(); 
 //重置绘制起始位置(将圆心位置重置为0,0) 
 ctx.translate(250,250); 
 //旋转画布到一定的弧度 弧度=角度*PI/180 
 ctx.rotate(hours * 30 * Math.PI / 180); 
 //设置绘制线条的起始位置 
 ctx.moveTo(0,10); 
 //设置线条的结束位置 
 ctx.lineTo(0,-100); 
 //绘制路径 
 ctx.stroke(); 
 //还原初始的绘图环境 
 ctx.restore(); 
 ctx.closePath(); 
 /*绘制分针*/ 
 ctx.beginPath(); 
 ctx.lineWidth = 3; 
 //保存当前绘图环境 
 ctx.save(); 
 //重置绘制起始位置(将圆心位置重置为0,0) 
 ctx.translate(250,250); 
 //旋转画布到一定的弧度 弧度=角度*PI/180 
 ctx.rotate(minutes * 6 * Math.PI / 180); 
 //设置绘制线条的起始位置 
 ctx.moveTo(0,10); 
 //设置线条的结束位置 
 ctx.lineTo(0,-120); 
 //绘制路径 
 ctx.stroke(); 
 //还原初始的绘图环境 
 ctx.restore(); 
 ctx.closePath(); 

更多JavaScript时钟特效点击查看:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部