html中钟表功能的js插件,javascript绘制简单钟表效果
本文给大家分享一个canvas的时钟绘制,供大家参考,具体内容如下
复制可直接使用
h1 {
text-align: center;
}
div {
width: 400px;
height: 400px;
margin: 10px auto;
padding: 0;
}
手绘时钟
var clock = document.getElementById("c1").getContext("2d");
// var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布
function play() {
clock.clearRect(0, 0, 400, 400);
clock.save();
clock.translate(200, 200); //把画布中心转移到canvas中间
biaopan();
run();
clock.restore();
}
setInterval(function() {
play();
}, 1000);
function biaopan() {
//绘制表盘
clock.strokeStyle = " #9932CC";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 195, 0, 2 * Math.PI);
clock.stroke();
//刻度(小时)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 5;
for(var i = 0; i < 12; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -170);
clock.stroke();
clock.rotate(2 * Math.PI / 12);
}
//刻度(分钟)
clock.strokeStyle = "#9932CC";
clock.lineWidth = 3;
for(var i = 0; i < 60; i++) {
clock.beginPath();
clock.moveTo(0, -190);
clock.lineTo(0, -180);
clock.stroke();
clock.rotate(2 * Math.PI / 60);
}
//绘制文字
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "#6495ED";
clock.font = "20px 微软雅黑"
for(var i = 1; i < 13; i++) {
clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
}
}
function run() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
// if(h > 12) {
// h = h - 12;
// }
//日期
var week = date.getDay();
var month = date.getMonth() + 1;
var day = date.getDate();
switch (week){
case 1: week = "星期一";
break;
case 2: week = "星期二";
break;
case 3: week = "星期三";
break;
case 4: week = "星期四";
break;
case 5: week = "星期五";
break;
case 6: week = "星期六";
break;
default: week = "星期天";
break;
}
clock.save();
clock.textAlign = "center";
clock.textBaseline = "middle";
clock.fillStyle = "black";
clock.font = "16px"
clock.fillText(week,-2,-118);
clock.fillText(month+" 月",-90,2);
clock.fillText(day+" 号",90,0);
clock.stroke();
clock.restore();
//时针
//分针60格 分针5格
clock.save();
clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
clock.strokeStyle = "black";
clock.lineWidth = 7;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -80);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//分针
//秒针60格 分针一格
clock.save();
clock.beginPath();
clock.strokeStyle = "#D2691E";
clock.lineWidth = 5;
clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
clock.moveTo(0, 0);
clock.lineTo(0, -110);
clock.lineCap = "round";
clock.stroke();
clock.restore();
//秒针
clock.strokeStyle = "red";
clock.rotate(2 * Math.PI / 60 * s);
clock.lineWidth = 4;
clock.beginPath();
clock.moveTo(0, 0);
clock.lineTo(0, -120);
clock.lineCap = "round";
clock.stroke();
//中心
clock.fillStyle = " #CCFFFF";
clock.lineWidth = 5;
clock.beginPath();
clock.arc(0, 0, 10, 0, 2 * Math.PI);
clock.fill();
clock.strokeStyle = "cadetblue";
clock.stroke();
}
更多JavaScript时钟特效点击查看:JavaScript时钟特效专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html中钟表功能的js插件,javascript绘制简单钟表效果相关推荐
- html中钟表功能的js插件,基于canvas的15种不同外观时钟js插件
CanvasClock是一款基于Canvas的纯js时钟插件.该js时钟插件可以通过配置参数来生成15种不同外观的时钟.它使用纯js来制作,没有使用任何css代码和外部依赖. 使用方法 在页面引入ca ...
- 怎么删除斗鱼html5插件,去掉斗鱼的无用功能脚本JS插件 免费版
去掉斗鱼的无用功能脚本JS插件是由作者MyFaith分享的一款浏览器扩展插件,用户通过该脚本插件可以去掉斗鱼的活动.游戏等无用功能,让你可以专心看直播. [使用方法] 1.Chrome浏览器 方法一( ...
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解, ...
- three.js插件实现立体动感视频播放效果
2019独角兽企业重金招聘Python工程师标准>>> three.js插件实现立体动感视频播放效果 效果描述: 立体式视频播放效果 大家使用的时候可得注意了,它并不支持低版本浏览器 ...
- vue实现波纹效果_简单的Vue.js插件可实现自定义波纹效果
vue实现波纹效果 Vue-Rippler (vue-rippler) Simple Vue.js plugin for custom ripple effect. 简单的Vue.js插件可实现自定义 ...
- js html css淘宝足迹日历效果,JavaScript实现简单日历效果
本文实例为大家分享了JavaScript实现简单日历效果的具体代码,供大家参考,具体内容如下 实现效果: 根据所选择的年月,列出当月对应是周几,效果图如下: 实现思路: 1.使用select标签保存年 ...
- DW中html怎么调用js,把Javascript代码应用到网页中的方法
把Javascript代码应用到网页中的方法 发布时间:2012-05-14 11:21:49 作者:佚名 我要评论 把Javascript代码放到网页中,做网页的时候经常要用到这个方法.请看 ...
- 【Canvas】js用canvas绘制一个钟表时钟动画效果
学习JavaScript的看过来,有没有兴趣用Canvas画图呢,可以画很多有趣的事物,自由发挥想象,收获多多哦,旋转角度绘图这个重点掌握到了吗,这里有一个例子,如何用canvas画钟表时钟动图效果, ...
- html 开关按钮 js代码,JavaScript实现开关等效果
废话不多说了,直接给大家贴代码了,具体代码如下所示: 开关灯 html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; cu ...
最新文章
- java中字段值重复校验,Java中一些常见的字段校验
- java状态机设计模式_设计模式总结-State模式
- boost::mp11::mp_fold相关用法的测试程序
- ajax异步加载和cmd,异步传输Ajax(JQ)
- 【探路者】第五周立会报告1(总第27次)
- android 播放器 下载,VPlayer安卓最新版
- html5 retina 1像素,7种方法解决移动端Retina屏幕1px边框问题
- 计算机的就业指导论文,★计算机就业指导论文题目计算机就业指导毕业论文题目大全计算机就业指导论文选题参考...
- 这个用PHP开发的全开源商城系统可免费商用
- 微信小程序第三方平台开发配置
- 大一下学期第十一周及以前学习总结
- Xcode8使用出现bundleid: com.xxx.xxx, enable_level: 0, persist_level: 0, propagate_with_acti
- ​微信小程序开发难?资深大V教您微信小程序制作步骤和方法​
- 从0开始部署基础的AlwaysOn
- PPT在线预览 转换为图片实现方案 Apache POI 实现时踩坑:含嵌入文件ppt转换报错 ArrayStoreException
- 环保材料营造健康氛围
- c语言2010软件下载,Access2010官方下载免费完整版|Access2010官方下载-太平洋下载中心...
- 在英特尔硬件上部署深度学习模型的无代码方法 OpenVINO 深度学习工作台的三部分系列文章 - CPU AI 第一部
- 网络调试助手——局域网广播消息——模拟HTTP服务器
- GreenPlum 安装