html画表盘 随时间转动,HTML5 canvas圆形时钟指针平缓转动随机切换表盘颜色
特效描述:HTML5 canvas圆形时钟 指针平缓转动 随机切换表盘颜色。使用HTML5制作的时钟,时针分针秒针平滑转动而不是蹦着走,每次进入网页或单机表盘会随即切换表盘边框的颜色。
代码结构
1. HTML代码
您的浏览器不支持canvas标签!
var clock=document.getElementById("clock");
var cxt=clock.getContext("2d");
var colr=(200+Math.floor(Math.random()*55.99));
var colg=(200+Math.floor(Math.random()*55.99));
var colb=(200+Math.floor(Math.random()*55.99));
function resetcolor(){
colr=(200+Math.floor(Math.random()*55.99));
colg=(200+Math.floor(Math.random()*55.99));
colb=(200+Math.floor(Math.random()*55.99));
}
function drawClock(){
//获取时间
var now=new Date();
var hou=now.getHours();
var min=now.getMinutes();
var sec=now.getSeconds();
var mec=now.getMilliseconds();
//转换12小时进制
hou=hou>12?hou-12:hou;
//清空画布
cxt.clearRect(0,0,500,500);
//阴影
cxt.fill();
cxt.fillStyle="gray";
cxt.beginPath();
cxt.arc(270,260,205,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//表盘
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(250,250,205,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//蓝色表盘(边框)
cxt.strokeStyle="#dddddd"
cxt.lineWidth=10;
cxt.beginPath();
cxt.arc(250,250,185,0,Math.PI*2,true);
cxt.closePath();
cxt.stroke();
cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16);
cxt.lineWidth=10;
cxt.beginPath();
cxt.arc(250,250,200,0,Math.PI*2,true);
cxt.closePath();
cxt.stroke();
cxt.strokeStyle="#"+colr.toString(16)+colg.toString(16)+colb.toString(16);
cxt.lineWidth=3;
cxt.beginPath();
cxt.arc(250,250,192,0,Math.PI*2,true);
cxt.closePath();
cxt.stroke();
cxt.strokeStyle="#"+(colr-100).toString(16)+(colg-100).toString(16)+(colb-100).toString(16);
cxt.lineWidth=5;
cxt.beginPath();
cxt.arc(250,250,205,0,Math.PI*2,true);
cxt.closePath();
cxt.stroke();
//刻度(时分)
//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
//设置原点
cxt.translate(250,250);
//设置旋转角度;
cxt.rotate(30*i/180*Math.PI);
cxt.beginPath();
cxt.moveTo(0,180);
cxt.lineTo(0,160);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
if(i%5!=0){
cxt.save();
cxt.lineWidth=2;
cxt.strokeStyle="black";
//设置原点
cxt.translate(250,250);
//设置旋转角度;
cxt.rotate(6*i/180*Math.PI);
cxt.beginPath();
cxt.moveTo(0,175);
cxt.lineTo(0,165);
cxt.closePath();
cxt.stroke();
cxt.restore();
}
}
//指针(时分秒)
//时针
cxt.save();
cxt.lineWidth=12;
cxt.strokeStyle="black";
cxt.beginPath();
cxt.translate(250,250);
cxt.rotate((hou*30+min*0.5+180)/180*Math.PI);
cxt.moveTo(0,0);
cxt.lineTo(0,90);
cxt.closePath();
cxt.stroke()
cxt.restore();
//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="black";
cxt.beginPath();
cxt.translate(250,250);
cxt.rotate((min*6+sec*0.1+180)/180*Math.PI);
cxt.moveTo(0,0);
cxt.lineTo(0,130);
cxt.closePath();
cxt.stroke()
cxt.restore();
//秒针
cxt.save();
cxt.lineWidth=2;
cxt.strokeStyle="red";
cxt.beginPath();
cxt.translate(250,250);
cxt.rotate((sec*6+mec*0.006+180)/180*Math.PI);
cxt.moveTo(0,0);
cxt.lineTo(0,150);
cxt.closePath();
cxt.stroke();
cxt.fillStyle="red";
cxt.beginPath();
cxt.arc(0,148,4,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(0,148,2,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.restore();
//秒针装饰
cxt.fillStyle="red";
cxt.beginPath();
cxt.arc(250,250,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.fillStyle="black";
cxt.beginPath();
cxt.arc(250,250,13,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.fillStyle="white";
cxt.beginPath();
cxt.arc(250,250,10,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
drawClock();
//使用setInterval(代码,周期(毫秒制))让时钟动起来
setInterval(drawClock,10);
html画表盘 随时间转动,HTML5 canvas圆形时钟指针平缓转动随机切换表盘颜色相关推荐
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
- 粒子背景php,html5+canvas圆形粒子移动背景动画特效
html5+canvas圆形粒子移动背景动画特效 this.update = function () { var lastPoint = { x: _this.x, y: _this.y }; // ...
- html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
- html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
- Canvas圆形时钟
今天带来一个圆形时钟,用JQ编写的Canvas 代码.Canvas 的神奇之处就在于,可以自行绘制图片不需要外部引入,当你深入了解这项技术的时候,你也会忍不住赞叹他的神奇之处. 虽然我一再强调 ...
- html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
- html如何画出四个圆圈,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
- html圆圈倒计时,基于HTML5 canvas圆形倒计时器jQuery插件
这是一款基于html5 canvas的圆形倒计时器jQuery插件.它可以使你非常轻松的创建圆形的倒计时器.该jQuery倒计时器插件有12种themes,它们基于 HTML5 canvas 来渲染各 ...
- HTML怎么在矩形上画直线,【绘制】HTML5 Canvas 绘画画板,实现鼠标画线条,画矩形或选区(图文、示例)...
个人处女做<Canvas系列教程>在个人Github上正在连载更新,但愿能获得您的关注和支持,让我有更多的动力进行创做.html 教程介绍.教程目录等能在README里查阅.git 目录函 ...
最新文章
- getTasksWithCompletionHandler的用法
- 【Windows10】安装一些更新时出现问题,但我们稍后会重试
- Linux 管道使用示例
- Github 大牛封装 Python 代码,实现自动发送邮件只需三行代码
- 探究 Java 应用的启动速度优化
- LeetCode每日一题 141. 环形链表
- CCF201403-1 相反数
- dubbo源码-服务发现
- 学习Jsoup(三)
- china-pub春季教材展,给力优惠,买二赠一
- c语言中文纠错,c语言纠错。。急急急。。
- 计算机网络应用平面设计广告设计,互联网时代平面广告设计
- 2022年Java常用的框架汇总,你常用哪一个?
- 信号与系统实验之信号的时域分析(Python+matplotlib)
- 提升机类设备电动机保护器的保护范围及优化
- wxid转微信号软件执行代码。
- Python PIL Image 4通道透明图片叠加(ARGB)
- 合并多个excel文件数据
- 【测试沉思录】17. 性能测试中的系统资源分析之四:网络
- 谢惠民,恽自求,易法槐,钱定边编数学分析习题课讲义16.2.3练习题参考解答[来自陶哲轩小弟]...
热门文章
- 2018美国计算机科学专业排名,最新出炉 2018年USNews美国大学研究生计算机科学专业排名榜单...
- VMware Funsion 8.5.1破解版
- 安全测试(六)iOS ipa软件安全 APP应用安全 手机软件安全 ipa安全 ipa反编译 应用日志窃取 ipa漏洞 应用软件本身功能漏洞 iPhone移动应用常规安全讲解
- erlang的逗号和分号和句号区别
- 三角形的几何公式大全_小学数学常用公式整理汇总(建议收藏)
- windows Git Gui 汉化
- Spark——Spark Project Tungsten深入解析
- linux上的WPS不显示图片,在deepin中解决单击wps图标没反应、两个wps图标的问题
- CPU工作方式、多核心、超线程技术详解[转贴]
- android dm-verity 功能