canvas 动画 时钟clock
- <canvas id="clock" width="500" height="500"></canvas>
- function drawClock(){
- var canvas = document.querySelector("#clock");
- var ctx = canvas.getContext("2d");
- drawDial(ctx); //绘制变盘
- // 绘制时针、分针、秒针
- var pi = Math.PI;
- var time = new Date();
- var s = time.getSeconds();
- var m = time.getMinutes();
- var h = time.getHours();
- var angleSecound = s*pi/30;
- var angleMinute = m*pi/30 + angleSecound/60;
- var angleHour = h*pi/6 + angleMinute/12;
- drawHand(angleSecound,190,2,"blue",ctx);
- drawHand(angleMinute,150,4,"green",ctx);
- drawHand(angleHour,80,6,"red",ctx);
- requestAnimationFrame(drawClock);
- }
- function drawHand(angle,length,width,color,ctx){
- var pi = Math.PI;
- ctx.save();
- ctx.translate(250,250);
- ctx.rotate(-pi/2 + angle);
- ctx.beginPath();
- ctx.lineCap = "round";
- ctx.moveTo(-4,0);
- ctx.lineTo(length,0);
- ctx.lineWidth = width;
- ctx.strokeStyle = color;
- ctx.stroke();
- ctx.closePath();
- ctx.restore();
- }
- function drawDial(ctx){
- var pi = Math.PI;
- ctx.clearRect(0,0,500,500);
- ctx.save();
- //绘制外周圆弧
- ctx.translate(250,250);
- ctx.strokeStyle="gray";
- ctx.beginPath();
- ctx.arc(0,0,200,0,2*pi);
- ctx.stroke();
- ctx.closePath();
- //绘制刻度
- for(var i=0;i<60;i++){
- ctx.save();
- ctx.rotate(-pi/2 + i*pi/30);
- ctx.beginPath();
- ctx.moveTo(180,0);
- ctx.lineTo(195,0);
- ctx.strokeStyle = i%5 ? "blue":"red";
- ctx.lineWidth = i%5 ? "2":"4";
- ctx.stroke();
- ctx.closePath();
- ctx.restore();
- }
- ctx.restore();
- }
- drawClock();
截图:
canvas 动画 时钟clock的更多相关文章
- [JS,Canvas]日历时钟
[JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- 使用canvas绘制时钟
使用canvas绘制时钟 什么使canvas呢?HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图 ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- html5学习(一)--canvas画时钟
利用空余时间学习一下html5. <!doctype html> <html> <head></head> <body> <canva ...
- canvas粒子时钟
前面的话 本文将使用canvas实现粒子时钟效果 效果展示 点阵数字 digit.js是一个三维数组,包含的是0到9以及冒号(digit[10])的二维点阵.每个数字的点阵表示是7*10大小的二维数组 ...
- canvas画时钟,重拾乐趣!
canvas时钟--效果图 一.先来简单介绍画时钟需要的canvas知识 1.在HTML页面中添加canvas元素,必须定义canvas元素的id属性值以便接下来的调用. HTML代码: <ca ...
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果:http://hovertree.com/te ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- canvas实现时钟
最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟.直接上代 ...
随机推荐
- System.Data.DbType映射关系
有如下类型的映射对照: System.Data.SqlClient.SqlDbType System.Data.OleDb.OleDbType System.Data.Odbc.OdbcType S ...
- gentoo rt-thread scons --menuconfig libs/lxdialog/util.o: undefined reference to symbol 'nodelay'
今天在另外一台电脑上面使用 rt-thread 的 env 工具,scons --menuconfig 出现错误,提示如下: scons: Reading SConscript files ... s ...
- UVA-714-二分+贪心
题意:K个人复制M本书,每本书有Pi页,要求每个人都能分到至少一本书,如果分到多本书籍,分到的书籍编号是连续的,并且K个人里面分到的书籍总页数最大的那个人总数最小. 如果有多组解,保证 K1 < ...
- 23.pyspider安装
1.pip安装pip3 install pyspider 2.验证安装 pyspider all 3.打开浏览器 输入:127.0.0.1:5000(如下图)
- http etag
基础知识 1) 什么是”Last-Modified”? 在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性 ...
- zookeeper(5)--基于watcher原理实现带注册中心的RPC框架
一.带版本控制的注册中心RPC框架 server端 //注册中心接口 public interface IRegisterCenter { public void register(String se ...
- k8s资料转载
K8S入门(二) kubeadmin单机部署 (kubernetes)k8s入门.yum单机版安装.kuberctl指令.k8s服务实例. kubernetes---CentOS7安装kubernet ...
- Redis位图实现用户签到功能
场景需求 适用场景如签到送积分.签到领取奖励等,大致需求如下: 签到1天送1积分,连续签到2天送2积分,3天送3积分,3天以上均送3积分等. 如果连续签到中断,则重置计数,每月初重置计数. 当月签到满 ...
- delphi 第三方组件 log4cpp.dll
log4cpp.dll LogHelper.dll TcxGridSite TcxSpreadSheetBook TcxSpreadSheetBook TcxTreeList TcxButtonEdi ...
- rocketmq 4.2.0 版本 控制台本地搭建(史上最简单教程)
就像发现新大陆一般,瞎折腾,搞出来了..并没有网上说的一大串....(本人公司的项目从未使用过springboot....) rocketmq 控制台,官方使用springboot 做后端,前端使用 ...