Canvas:时钟
这个时钟是将钟盘的圆心点移到了 canvas 画布中心点。以方便后面的方位计算
ctx.translate(width/2,height/2);
现定义一个圆盘来显出这个时钟的基本位置
ctx.save()
ctx.beginPath();
ctx.arc(0,0,r+90,0,2*Math.PI,false);
ctx.lineWidth = 200;
ctx.closePath();
ctx.drawImage(img,-r,-r,width,height);
var grd = ctx.createLinearGradient(0,0,0,r);
var r1 = Math.floor(Math.random()*256);19:48:19
var g1 = Math.floor(Math.random()*256);
var b1 = Math.floor(Math.random()*256);
grd.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
grd.addColorStop(1,"rgb(" + r1 + "," + g1 + "," + b1 + ")");
ctx.strokeStyle = grd;
ctx.stroke();
我在这里面添加了线性渐变来改变颜色,如果感觉颜色太过绚丽可以注释掉不写。
var grd1 = ctx.createLinearGradient(0,0,0,r);
var r3 = Math.floor(Math.random()*256);
var g3 = Math.floor(Math.random()*256);
var b3 = Math.floor(Math.random()*256);
grd1.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
grd1.addColorStop(1,"rgb(" + r3 + "," + g3 + "," + b3 + ")");
然后利用到了三角函数原理来计算出钟表中刻度的位置;
var x = Math.cos(Math.PI/6*i)*(r-30);
var y = Math.sin(Math.PI/6*i)*(r-30);
然后通过计算来显示出时刻和刻度的分布位置
// 时刻 ctx.beginPath();
var arr = ["III","IV","V","VI","VII",'VIII',"IX",'X','XI','XII','I','II'];
ctx.font = "20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
var grd2 = ctx.createLinearGradient(0,0,0,r);
var r2 = Math.floor(Math.random()*256);
var g2 = Math.floor(Math.random()*256);
var b2 = Math.floor(Math.random()*256);
grd2.addColorStop(0,"rgb(" + r2 + "," + g2 + "," + b2 + ")");
grd2.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
ctx.fillStyle = grd2;
ctx.fill();
ctx.closePath();
for (var i = 0;i < arr.length; i ++){
var x = Math.cos(Math.PI/6*i)*(r-30);
var y = Math.sin(Math.PI/6*i)*(r-30);
ctx.fillText(arr[i],x,y);
} // 刻度
for(var j =0;j < 60;j ++){
var x = Math.cos(Math.PI/30*j)*(r-15);
var y = Math.sin(Math.PI/30*j)*(r-15);
ctx.beginPath();
ctx.arc(x,y,2,0,2*Math.PI,false);
var grd1 = ctx.createLinearGradient(0,0,0,r);
var r3 = Math.floor(Math.random()*256);
var g3 = Math.floor(Math.random()*256);
var b3 = Math.floor(Math.random()*256);
grd1.addColorStop(0,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
grd1.addColorStop(1,"rgb(" + r3 + "," + g3 + "," + b3 + ")");
ctx.fillStyle = grd1;
ctx.fill();
}
ctx.closePath();
}
接下来就是时针、分针和秒针
在这里值得一提的是,秒针在移动的时候是带着分针和时针一起转动的,所以在计算时针的转动角度时,要把分针的也计算在一起,不过分针的计算角度要更新下
var HOUR = Math.PI/6*hour;
var MINU = Math.PI/6/60*minu;
同样的在计算分针时,要带上秒针
var MINU = Math.PI/30*minu;
var SECON = Math.PI/1800*secon;
这样,我们在运行时,就可以看出,分针和时针都是不停的在运转的
// 小时
function timh(hour,minu){
ctx.save();
ctx.beginPath();
ctx.lineWidth = 6;
var HOUR = Math.PI/6*hour;
var MINU = Math.PI/6/60*minu;
ctx.rotate(HOUR+MINU);
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2);
ctx.lineCap = "round";
var grd3 = ctx.createLinearGradient(0,0,0,r);
var r3 = Math.floor(Math.random()*256);
var g3 = Math.floor(Math.random()*256);
var b3 = Math.floor(Math.random()*256);
grd3.addColorStop(0,"rgb(" + r3 + "," + g3 + "," + b3 + ")");
grd3.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
ctx.strokeStyle = grd3;
ctx.stroke();
ctx.restore();
} // 分钟
function timm(minu,secon){
ctx.save();
ctx.beginPath();
ctx.lineWidth = 3;
var MINU = Math.PI/30*minu;
var SECON = Math.PI/1800*secon;
ctx.rotate(MINU+SECON);
ctx.moveTo(0,10);
ctx.lineTo(0,-r+50);
ctx.lineCap = "round";
var grd4 = ctx.createLinearGradient(0,0,0,r);
var r4 = Math.floor(Math.random()*256);
var g4 = Math.floor(Math.random()*256);
var b4 = Math.floor(Math.random()*256);
grd4.addColorStop(0,"rgb(" + r4 + "," + g4 + "," + b4 + ")");
grd4.addColorStop(1,"rgb(" + r0 + "," + g0 + "," + b0 + ")");
ctx.strokeStyle = grd4;
ctx.stroke();
ctx.restore();
} // 秒钟
function tims(secon){
ctx.save();
ctx.beginPath();
var SECON = Math.PI/30*secon;
ctx.rotate(SECON);
ctx.fillStyle = "red"
ctx.moveTo(-2,20);
ctx.lineTo(2,20);
ctx.lineTo(1,-r+20);
ctx.lineTo(-1,-r+20);
ctx.closePath();
ctx.fill();
ctx.restore();
}
在最后为了真实一点,在钟盘中心增加一个固定
function ding(){
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(0,0,3,0,Math.PI*2);
ctx.closePath();
ctx.fill();
}
最后在添加无限定时器运转
function cleann(){
ctx.clearRect(-r,-r,width,height);
var timer = new Date();
var hour = timer.getHours();
var minu = timer.getMinutes();
var secon = timer.getSeconds(); fun();
timh(hour,minu);
timm(minu,secon);
tims(secon);
ding();
ctx.restore();
}setInterval(cleann,1000);
效果(背景图片可以自行加入)
Canvas:时钟的更多相关文章
- Coffeescript实现canvas时钟
前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...
- 》》canvas时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生js之canvas时钟组件
canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- Canvas - 时钟绘制
导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...
- html5 canvas时钟
基础知识点: canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...
- canvas时钟效果
话不多说,直接上代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/x ...
- HTML5 Canvas 时钟
1. [图片] QQ截图20120712130049.png 2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" &g ...
- 简单的canvas时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas 时钟+自由落体
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- Java实现单例模式的9种方法
一. 什么是单例模式 因程序需要,有时我们只需要某个类同时保留一个对象,不希望有更多对象,此时,我们则应考虑单例模式的设计. 二. 单例模式的特点 1. 单例模式只能有一个实例. 2. 单例类必须创建 ...
- storm集群架构
一.storm何许人也? Storm 是Twitter的一个开源框架.Storm一个分布式的.容错的实时计算系统,它被托管在GitHub上,遵循 Eclipse Public License 1.0. ...
- [Swift]LeetCode131. 分割回文串 | Palindrome Partitioning
Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...
- [Swift]LeetCode728. 自除数 | Self Dividing Numbers
A self-dividing number is a number that is divisible by every digit it contains. For example, 128 is ...
- [Swift]LeetCode795. 区间子数组个数 | Number of Subarrays with Bounded Maximum
We are given an array A of positive integers, and two positive integers L and R (L <= R). Return ...
- Kubernetes 笔记 07 豌豆荚之旅(二)
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...
- Mysql的两种“超过多少次”写法(力扣596)
题目: 有一个courses 表 ,有: student (学生) 和 class (课程). 请列出所有超过或等于5名学生的课. 例如,表: +---------+------------+ | s ...
- [MV] - You Give REST a Bad Name
本首歌改自Bon Jovi经典歌曲"You Give Love a Bad Name". 改编的作者是Dylan Beattie, 他是Spotlight的系统架构师. 改编后的歌 ...
- AI 这么优秀,连我鉴黄师的饭碗都抢了
色情行业,或许是对信息渠道最敏锐.利用各类信息渠道进行传播最“充分”的“行业”.这些年,社交 App.直播.短视频等新的互联网应用方式,都难逃色情内容的“骚扰”.哪里人多,色情内容就能立刻扑过去,在海 ...
- PHP-mysqli 出错回显
面向对象风格 <?php $conn = new mysqli("localhost", "username", "password" ...