canvas 时钟动画
平时在公司不忙的时候,就喜欢写一些小效果什么的,一来复习复习,二来可以发现一些问题。
今天在群里看别人发了一手表的图片,卧槽...妥妥的工作好多年的节奏,后来想想还是做好自己的事情算了,想那多干啥,就画了一个手表....
效果图,没有录制gif的
直接上代码:
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>canvas clock</title>
<script type="text/javascript" src="percent.js"></script>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
clock.canvasClock();
</script>
js
var clock=(function(){
function _canvasClock(){
var cvs=document.getElementById('canvas');
var ctx=cvs.getContext('2d');
var PI=Math.PI;
var lineWidth=5; //线宽
var gradient=ctx.createLinearGradient(10,10,580,580); //设置圆的颜色渐变
gradient.addColorStop("0","#a251ff");
gradient.addColorStop(1,"#2ec2ff");
ctx.fillStyle = '#ef6670';
ctx.fillRect(0,0,600,600);
var drawBig=function(){
var time=new Date();
var second=time.getSeconds(); //秒
var Minute=time.getMinutes(); //分
var hour=time.getHours(); //时
//hour=hour+Minute/60;
hour=hour>12?hour-12:hour; //表盘只有12小时 ctx.clearRect(0,0,600,600); //清空给定矩形内的指定像素
//画圆
ctx.beginPath();
ctx.lineWidth=lineWidth;
ctx.strokeStyle=gradient;
ctx.arc(300,300,290,0, PI * 2,false);
ctx.stroke();
ctx.closePath(); ctx.beginPath();
ctx.lineWidth=lineWidth;
ctx.strokeStyle=gradient;
ctx.arc(300,300,10,0, PI * 2,false);
ctx.stroke();
ctx.closePath(); for(var i=0;i<60;i++){
ctx.save(); //保存之前画布状态
ctx.lineWidth=4; //设置分针的粗细
ctx.strokeStyle="#616161"; //设置分针的颜色
ctx.translate(300,300); //画布圆点设置
ctx.rotate(i*PI/30); //角度*Math.PI/180=弧度,设置旋转角度
ctx.beginPath(); //开始一条路径
ctx.moveTo(0,-287); //相对画布圆点路径的起点
ctx.lineTo(0,-283); //相对画布圆点路径的终点
ctx.closePath(); //结束一条路径
ctx.stroke(); //实际地绘制出通过 moveTo()和 lineTo()方法定义的路径
ctx.restore(); //restore() 方法将绘图状态置为保存值
} for(var i=0;i<12;i++){
ctx.save();
ctx.lineWidth=4;
ctx.strokeStyle=gradient;
ctx.translate(300,300);
ctx.rotate(i*PI/6);
ctx.beginPath();
ctx.moveTo(0,-287);
ctx.lineTo(0,-278);
ctx.closePath();
ctx.stroke();
ctx.restore();
} //时针
ctx.save();
ctx.lineWidth=3;
ctx.strokeStyle="#0f0f0f";
ctx.translate(300,300);
ctx.rotate(hour*PI/6+second*PI/108000);
ctx.beginPath();
ctx.moveTo(0,-238);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore(); //分针
ctx.save();
ctx.lineWidth=3;
ctx.strokeStyle="#010101";
ctx.translate(300,300);
ctx.rotate(Minute*PI/30+second*PI/1800);
ctx.beginPath();
ctx.moveTo(0,-258);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore(); //秒针
ctx.save();
ctx.strokeStyle="#ff100d";
ctx.lineWidth=3;
ctx.translate(300,300);
ctx.rotate(second*PI/30);
ctx.beginPath();
ctx.moveTo(0,-278);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke(); ctx.beginPath(); //时针分针秒针交点
ctx.arc(0,0,6,0,2*PI,false);
ctx.closePath();
ctx.fillStyle="#fff";
ctx.fill();
ctx.stroke();
ctx.restore();
requestAnimationFrame(drawBig); //实现动画修改的接口
};
drawBig();
setInterval(drawBig,1000); //每1s重绘一次
};
return{
canvasClock:_canvasClock,
}
}())
本来准备封装一下的,要下班时来任务了,飞了....
canvas 时钟动画的更多相关文章
- 15个超强悍的CSS3圆盘时钟动画赏析
在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有 ...
- 使用Canvas制作时钟动画
复习Javascript到Canvas的知识点,看到一个使用Canvas绘制的静态时钟例子,便想将其变成动态显示系统时间的时钟动画.另外再配上数字显示的时钟,一个小的时钟模块的诞生了!目前的界面还比较 ...
- Coffeescript实现canvas时钟
前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...
- 14款超时尚的HTML5时钟动画
时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...
- 14款形态各异的超时尚HTML5时钟动画
14款超时尚的HTML5时钟动画(附源码) 时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果
- 》》canvas时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
- iOS中的时钟动画
iOS 动画效果非常多,我们在开发中可能会遇到很多动画特效,我们就会用到核心动画框架CoreAnimation,核心动画里面的动画效果有很多,都是在QuartzCore.framework框架里面,今 ...
随机推荐
- [Swift]LeetCode780. 到达终点 | Reaching Points
A move consists of taking a point (x, y) and transforming it to either (x, x+y) or (x+y, y). Given a ...
- [Swift]LeetCode969.煎饼排序 | Pancake Sorting
Given an array A, we can perform a pancake flip: We choose some positive integer k <= A.length, t ...
- HBase之Table.put客户端流程
首先,让我们从HTable.put方法开始.由于这一节有很多方法只是简单的参数传递,我就简单略过,但是,关键的方法我还是会截图讲解,所以希望大家尽可能对照源码进行流程分析.另外,在这一节,我单单介绍p ...
- 前两天做项目遇到了sqlserver最大连接数 Max Pool Size 的问题
前言:出现这种问题使因为程序对connection的回收出现了问题,是因为你的代码出出现了过多new connection(),这种情况还是你的代码问题,如果不想把问题归根于程序,那你就可以改变con ...
- nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_module in ......
nginx如果未开启SSL模块,配置https时提示错误 nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_modu ...
- C#版[击败98.85%的提交] - Leetcode717. 1比特与2比特字符 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...
- Python2中文处理纪要
python2不是以unicode作为基本代码字符类型,碰到乱码的几率是远远高于python3,但即便如此,相信很多人,也不想随意的迁移到python3,这里就总结几个我平常碰到的问题及解法. 文件中 ...
- Android Studio gradle插件版本和gradle版本对应关系
1.gradle插件版本配置位置: project对应的build.gradle文件中 buildscript { repositories { jcenter() } dependencies { ...
- 深入探究Lua的GC算法(上)-《Lua设计与实现》
对于内存的管理,是程序在应用的时候的必需知识点,<Lua设计与实现>中对Lua语言的GC原理做了一个详细的讲解,云风的blog也对其进行了详尽的讲解Lua GC 的源码剖析 系列 给出作者 ...
- leetcode — interleaving-string
/** * Source : https://oj.leetcode.com/problems/interleaving-string/ * * * Given s1, s2, s3, find wh ...