html 指针图表,HTML5 canvas 指针时钟
您的浏览器不支持canvas标签,无法看到时钟
var clock=document.getElementById('clock');var cxt=clock.getContext('2d');
function drawClock(){
cxt.clearRect(0,0,500,500); //清除画布区域
var now =newDate();var sec=now.getSeconds();var min=now.getMinutes();var hour=now.getHours();
hour=hour+min/60; //小时必须获取浮点类型(小时+分数转化成的小时)//问题 19:23:30//将24小时进制转换为12小时
hour=hour>12?hour-12:hour;
cxt.lineWidth=10;
cxt.strokeStyle="#A61C3E"; //表盘(蓝色)
cxt.beginPath();
cxt.arc(250,250,200,0,Math.PI*360,false);
cxt.closePath();
cxt.stroke();//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.lineWidth=7; //设置时针的粗细
cxt.strokeStyle="#005693"; //设置时针的颜色
cxt.translate(250,250);
cxt.rotate(i*30*Math.PI/180);//角度*Math.PI/180=弧度
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}//分刻度
for(var i=0;i<60;i++){
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#04562E";
cxt.translate(250,250);
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}//时针
cxt.save();
cxt.lineWidth=7;
cxt.strokeStyle="#04562E";
cxt.translate(250,250);//设置异次元空间的0,0点,画布的圆心
cxt.rotate(hour*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-120); //针长
cxt.lineTo(0,10);
cxt.closePath();
cxt.stroke();
cxt.restore();//分针
cxt.save();
cxt.lineWidth=5;
cxt.strokeStyle="#000";
cxt.translate(250,250);
cxt.rotate(min*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-150);
cxt.lineTo(0,15);
cxt.closePath();
cxt.stroke();
cxt.restore();//秒针
cxt.save();
cxt.strokeStyle="#611123";
cxt.lineWidth=3;
cxt.translate(250,250);
cxt.rotate(sec*6*Math.PI/180);//设置旋转角度
cxt.beginPath(); //画图
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.closePath();
cxt.stroke();
cxt.beginPath();//画出时针、分针、秒针的交叉点、
cxt.arc(0,0,5,0,360,false);
cxt.closePath();
cxt.fillStyle="gray"; //设置填充样式
cxt.fill();
cxt.stroke();//设置秒针前段的小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
cxt.closePath();
cxt.fillStyle="#FFF";
cxt.fill();
cxt.stroke();//设置笔触样式(秒针已设置)
cxt.restore();
}
drawClock();//1000毫秒前要显示//使用setInterval(代码,毫秒时间) 让时钟动起来
setInterval(drawClock,1000);
html 指针图表,HTML5 canvas 指针时钟相关推荐
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
- html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
- html5 canvas简易时钟
<canvas id='clock' width=500 height=500>您的浏览器需要升级</canvas><script type="text/jav ...
- html制作状态栏数字时钟,html5 canvas制作15种数字时钟样式代码
特效描述:html5 canvas制作 数字时钟样式.html5 canvas数字时钟代码 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 clockd1_={ "indic ...
- html5 canvas通过javascript绘制漂亮的时钟
小菜鸟新进博客园,发布一个时钟来纪念一下这个历史性的时刻!介于我比较喜欢那些循循善诱的教学方法,我也将遵循这种方式,一步一步讲述这个过程.让我们开始吧~ 准备工作: 首先新建一个空的Web应用程序,并 ...
- 【基础知识】HTML5 Canvas小项目时钟的简单实现(图文、演示)
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
- html5 canvas图表,Chart.js基于Canvas画布的HTML5统计图表库 - 资源分享
Chart.js 是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.可以绘制柱状图.热点图.曲线图等,使用HTML5中的Canvas画布,支持原生的和jQuery的调用方法. 特点 6种图表 ...
- 基于html5 Canvas图表库 : ECharts
基于html5 Canvas图表库 : ECharts 分类 编程技术 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生 ...
最新文章
- 【找规律】HDU 4662——MU Puzzle
- ORA-01400: 无法将 NULL 插入 (CHARGE_WQRL.SF_JMQTFY_T.BH)
- 使用可视化工具redisclient连接redis
- ViewPager中Fragment的重复创建、复用问题
- mysql Access denied for user root@localhost错误解决方法总结
- pythonsocket中tcp通信接收不到数据_TCP 为什么三次握手而不是两次握手(正解版)...
- 【python】过长代码换行续行方法
- 电脑鼠标失控自己乱点_在这款沙盒游戏里,你只需要乱点鼠标就能成为建筑艺术家...
- java.lang.ClassNotFoundException: com.google.wireless.android.sdk.stats.IntellijIndexingStats$Index
- 安装了java环境后,双击.jar包无法运行的解决方案
- 第3章第11节:如何将众多图片制作成照片墙并作为幻灯片的背景 [PowerPoint精美幻灯片实战教程]
- 一种车牌识别摄像机在立体车库中的应用方案
- 其实带宽≠速度 ADSL加速法完全功略
- 知识星球有必要加入吗?
- 阿里巴巴JAVA代码规范三【考题】
- 使用zoom实现低成本企业视频会议解决方案
- CMIP6中进行SWAT数据制备时,辐射和相对湿度降尺度一般都用什么方法?类似降水还是气温还是风速的算法?
- 用html制作表白网站制作 超炫酷的七夕情人节表白网页代码
- 女人要怀有一颗珍惜之心
- 电脑每次启动都硬盘自检
热门文章
- 人工智能学习-传教士-15数码-拟合-逻辑推理
- 总体、样本、样本的抽样分布
- 批量抓取羊毛网站信息,定时自动发送到邮箱进行阅览
- 【AI视野·今日CV 计算机视觉论文速览 第241期】Wed, 1 Dec 2021
- matlab的小技巧
- win7右键菜单管理_电脑鼠标右键管理工具下载 Windows鼠标右键增强管理软件 v1.0 绿色单文件免费版 下载...
- 招投标工作中投标书编制的流程是怎样的?
- cad刷新快捷键_36个CAD快捷键命令,18个CAD制图技巧,学会轻松玩转CAD
- HTML5的文档声明
- 网站跳出率(Bounce Rate)