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 < 12;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 < 60;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();
/*绘制秒针*/
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#f00';
//保存当前绘图环境
ctx.save();
//重置绘制起始位置(将圆心位置重置为0,0)
ctx.translate(250,250);
//旋转画布到一定的弧度 弧度=角度*PI/180
ctx.rotate(seconds * 6 * Math.PI / 180);
//设置绘制线条的起始位置
ctx.moveTo(0,10);
//设置线条的结束位置
ctx.lineTo(0,-135);
//绘制路径
ctx.stroke();
//还原初始的绘图环境
ctx.restore();
ctx.closePath();
}
setInterval(draw,1000);
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript实现动态时钟的启动和停止
javascript实现动态时钟的启动和停止,点击开始按钮,获取当前时间,点击停止按钮,时间停止 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态时钟的启动和停止</title> </head> <body background="img/2.jpg" style="background-re
-
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800
-
Javascript实现动态时钟效果
本文实例为大家分享了js实现动态时钟效果的具体代码,供大家参考,具体内容如下 1.css代码 <style type="text/css"> #box{ width:200px; height:200px; background:pink; margin:100px auto; line-height:200px; text-align:center; border-radius:50%; box-shadow:0 0 100px pink; color:black; }
-
js+SVG实现动态时钟效果
本文实例为大家分享了js+SVG实现动态时钟效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <meta charset="utf-8"> <head> <title>Analog Clock</title> <script> function updateTime() { var now = new Date(); // 当前时间 var min = now.
-
基于javascript实现动态时钟效果
本文实例讲解了javascript动态时钟效果的实现方法,分享给大家供大家参考,具体内容如下 实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <
-
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 #
-
JS+Canvas实现动态时钟效果
基于Canvas制作的动态时钟demo,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态时钟</title> <script type="text/javascript" src="js/lattice.js"></script> <script
-
js Canvas绘制圆形时钟效果
本文实例为大家分享了js Canvas圆形时钟的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Clock</title> <style type="text/css"> div{ text-align: center; margin-top: 250px
-
JavaScript Canvas绘制动态线框效果
本文实例为大家分享了JavaScript Canvas绘制动态线框效果的具体代码,供大家参考,具体内容如下 本周项目,移动端页面开发,要求丰富的动效,主要技术实现 Canvas :其中绘制动态线框,走了点弯路,所谓的弯路是逻辑问题,非技术实现方式. 一.涉及技术点,具体如下: 1.html 中引入canvas 标签,设置宽高: <canvas id="canvas" width=xx height=xx>您的浏览器不支持canvas,请更换版本</canvas>
-
js Canvas绘制圆形时钟教程
本文实例为大家分享了Canvas绘制圆形时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-clock</title> </head> <body> <canvas id="canvas" width=&
-
JavaScript Canvas绘制圆形时钟效果
本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> canvas{ display: block; margin: 0 auto; background-color: #fdffad; border: 1px solid #0
-
javascript canvas封装动态时钟
本文实例为大家分享了canvas封装动态时钟的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
-
JS+canvas绘制的动态机械表动画效果
本文实例讲述了JS+canvas绘制的动态机械表动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 完整实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas时钟</title> <style> canvas { border: 1px
-
js+html5实现canvas绘制网页时钟的方法
本文实例讲述了js+html5实现canvas绘制网页时钟的方法,画的是一个可用于网页的.带摆的钟表,可以通过按钮调整其大小和位置,具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> <script type="tex