首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js+html5实现canvas绘制网页时钟的方法

Posted in Javascript onMay 21, 2016

本文实例讲述了js+html5实现canvas绘制网页时钟的方法，画的是一个可用于网页的、带摆的钟表，可以通过按钮调整其大小和位置，具体实现内容如下

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clock</title>
<script type="text/javascript"> 
var xClock=300; //表心位置
var yClock=250; //表心位置
var d=180.0;//钟表圆面的半径
var value = -d*1.07;
 
function enlarge(){
 d++;
}
function reduce(){
 d--;
}
function westwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(-1,0); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(-1,0); //置坐标轴原点于表心
 
}
function eastwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(1,0); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(1,0); //置坐标轴原点于表心
}
function upwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(0,-1); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(0,-1); //置坐标轴原点于表心
}
function downwards(){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(0,1); //置坐标轴原点于表心
 c=document.getElementById("myPendulum");
 g2d=c.getContext("2d"); 
g2d.translate(0,1); //置坐标轴原点于表心
}
 
 
function fillPolygon( a, b, fillColor, ctx){
ctx.beginPath();
ctx.moveTo(a[0],b[0]);
for (var j=1;j<a.length;j++)
ctx.lineTo(a[j],b[j]);
ctx.closePath();
ctx.fillStyle=fillColor;
ctx.fill();
}
 
function randomColor(){ 
var s ="#";
for (var i=0;i<3;i++)
s += Math.floor(Math.random()*16).toString(16);
return s;
}
 
function locateCoordinate() {
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d"); 
g2d.translate(xClock,yClock); //置坐标轴原点于表心
var c=document.getElementById("myPendulum");
var g2d=c.getContext("2d"); 
g2d.translate(xClock,yClock); //置坐标轴原点于表心
}
 
function drawFace(){ //定义画钟表表面drawFace方法
/* 表示1,2,4,5,7,8,10,11点钟位置的较小尺寸的菱形标志顶点坐标数组 */
var x = new Array(0, Math.round(d/30), 0, Math.round(-d/30));
var y = new Array( Math.round(-d*1.07),-d,Math.round(-d*0.9),-d);
/* 表示3,6,9,12点钟位置的较大尺寸的菱形标志顶点坐标数组 */
var x1= new Array(0,Math.round(d/15),0,Math.round(-d/15));
var y1 =new Array(Math.round(-d*1.13),-d,Math.round(-d*0.9),-d);
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
 //下面开始 准备画钟表圆面边
 g2d.beginPath();
 g2d.arc(0,0,d, 0 , 2*Math.PI);
 g2d.strokeStyle="lightGray";
 g2d.lineWidth=d/18;
 g2d.stroke(); //最后一笔，画钟表圆面边
 
 //下面开始准备画表示 每个钟点 的菱形
 for (var i=0;i<12;i++) 
 { //for 循环语句的循环体开始
 if (i%3==0){ //画较大尺寸的红色菱形，表示3,6,9,12点
 fillPolygon( x1, y1, "red", g2d);
 } else {//画较小尺寸的桔黄色菱形，表示其余的钟点
 fillPolygon(x,y,"orange",g2d);
 }
//以钟表表心为原点,坐标系顺时针转动30度,以便画下一个钟点位置的菱形标记
 g2d.rotate(Math.PI/6.0); 
 }//for 循环语句的循环体结束
}//画钟表表面 drawFace 方法结束
 
/* 定义画钟表的时针、分针、和秒针的方法 drawNeedles
* 形参 Hradian，单位弧度， 为时针从0点算起的弧度位置，
* 形参 Mradian，单位弧度， 为分针从0分算起的弧度位置，
* 形参 Sradian，单位弧度， 为秒针从0秒算起的弧度位置。*/
function drawNeedles( Hradian, Mradian, Sradian ){
var c=document.getElementById("myCanvas");
var g2d=c.getContext("2d");
//以钟表表心为原点,坐标系顺时针转动Hradian弧度,以便画出时针
 g2d.rotate(Hradian); 
 //表示时针的多边形顶点的坐标数组
var Hx =new Array(0, Math.round(d/19),0, Math.round(-d/19) ); 
var Hy =new Array( Math.round(-d/2), Math.round(-d/3), 0, Math.round(-d/3) );
 fillPolygon(Hx,Hy,"magenta",g2d);//时针设为紫红色,
//以钟表表心为原点,坐标系逆时针转动Hradian弧度,以还原坐标系
 g2d.rotate(-Hradian); 
 
//以钟表表心为原点,坐标系顺时针转动Mradian弧度,以便画出分针 
 g2d.rotate(Mradian);
//表示分针的多边形顶点的坐标数组
var Mx=new Array(Math.round(-d/19),0,Math.round(d/19));
var My=new Array(0,Math.round(-d/1.3),0);
 fillPolygon(Mx,My,"gray",g2d); //分针设为灰色
//以钟表表心为原点,坐标系逆时针转动Mradian弧度,以还原坐标系
 g2d.rotate(-Mradian);
 
//以钟表表心为原点,坐标系顺时针转动Sradian弧度,以便画出秒针 
 g2d.rotate(Sradian);
 // 秒针设为随机颜色 
 g2d.strokeStyle='green';
 g2d.lineWidth="1";
 g2d.moveTo(0,0);
 g2d.lineTo(0,Math.round(-d/1.1));
 g2d.stroke();
 
 g2d.beginPath();
 g2d.arc(0,Math.round(-d),d/18, 0 , 2*Math.PI);
 g2d.fillStyle=randomColor();
 g2d.fill(); //最后一笔，画秒针顶点的小球
//以钟表表心为原点,坐标系逆时针转动Sradian弧度,以还原坐标系
 g2d.rotate(-Sradian); 
} //画表针方法 drawNeedles的代码块结束 
 
/* 画出字符串来表示瞬时时间 */
function DrawTime() {
 var time=new Date(); //获取当前时间。
 var hour=time.getHours(); //获取小时
 var minute=time.getMinutes();//获取分钟
 var second=time.getSeconds();//获取秒数
 
 var apm="AM"; //默认显示上午：AM.
 var canvas =document.getElementById("myCanvas"); 
 var g2d =canvas.getContext("2d"); 
 if(hour>12){
 //按照12小时制止显示
 hour=hour-12;
 apm="PM";
 }
 if(minute<10){
 //如果分钟只有1位，补0显示
 minute="0"+minute;
 }
 if(second<10){ //如果秒数只有1位，补0显示
 second="0"+second;
 }
 g2d.clearRect(-xClock,-yClock,600,600); //清屏
 
var s = hour+":"+minute+":"+second+":"+apm;
 
 g2d.fillStyle="red";
 g2d.font = d/4+ "px KAITI"; 
 g2d.fillText(s,-d/1.8, d*1.4);
g2d.font= d/4 + "px 楷体";
// Create gradient
var gradient=g2d.createLinearGradient(0,0,canvas.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// Fill with gradient
g2d.fillStyle=gradient;
g2d.fillText("大数据",-d/2.6,d/2);
//获得实例创建瞬间的秒读数,由此计算出秒针,相对于0 秒,走过的弧读数
var c = Math.PI/30 * second; 
//获得创建瞬间的的分钟读数,由此计算出分针,相对于0 分,走过的弧读数
var b = Math.PI/30 * minute;
/* 获得创建瞬间的的钟点读数,由此计算出时针,相对于0 点,走过的弧读数。
 * 时针走过的弧度为整点的度数(每小时走30度),加上走过分钟数的修正值 */
var a = Math.PI/180*(30 * hour + minute/2);
/* 坐标系平移 (xClock,yClock) ，使得坐标轴成为表盘中心 */
 drawFace();
 drawNeedles( a, b, c); 
 } // 方法 DrawTime 的代码块结束
 
 var i=0;
function pendulum() { //pendulum_bob
var instantAngle = new Array(64,61,56,49,40,29,16,3,-8,
-16,-29,-40,-49,-56,-61,-64,-64,-64,-61,-56,-49,-40,-29,
-16,-8,3,16,29,40,49,56,61,64,64); //摆的即时角度数组
var c=document.getElementById("myPendulum");
var ctx=c.getContext("2d");
var alpha=instantAngle[i++%instantAngle.length]*Math.PI/180;
ctx.clearRect(-300,-300,900,900);
ctx.rotate(alpha);
 // 秒针设为随机颜色 
 ctx.fillStyle='brown';
 ctx.fillRect(-3,0,6,d*1.4);
 
ctx.shadowBlur=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
//ctx.fillRect(-d/3.5, d*1.35, d/1.6, d/4.4);
 
ctx.font="40px 楷体";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","white");
// Fill with gradient
//ctx.fillStyle=gradient;
ctx.fillStyle="red";
 
ctx.fillText("大数据",-d/3.2,d*1.55);
ctx.shadowBlur=0;
ctx.shadowColor=null;
ctx.fillStyle=null;
ctx.rotate(-alpha);
 
}
 
 
function preparation(){
 locateCoordinate()
 setInterval('DrawTime()',500);
 setInterval('pendulum()',200);
} 
</script>
<style>
#myCanvas{
 z-index:3;
 position:absolute; left:0px; top:0px;
 
}
#myPendulum{
 z-index:2;
 position:absolute; left:0px; top:0px;
}
#controlPanel{
 position:absolute; left:600px; top:0px;
 width:100px;
 text-align:center;
 font-family:"楷体";
 font-size:20px;
 font-weight:bold;
 color:#6C0;
}
</style>
</head>
<body onLoad="preparation()">
<canvas id="myCanvas" width="600" height="600" > 
  <p>Your browserdoes not support the canvas element!</p> 
</canvas>
<canvas id="myPendulum" width="600" height="600" > 
  <p>Your browserdoes not support the canvas element!</p> 
</canvas>
<div id="controlPanel">
<table>
<tr><td>控制</td><td>按钮</td></tr>
<tr><td><input value="增大" type="button" onclick="enlarge()"></button></td>
<td><input value="缩小" type="button" onclick="reduce()"></button></td></tr>
 
<tr><td><input value="左移" type="button" onclick="westwards()"></button></td>
<td><input value="右移" type="button" onclick="eastwards()"></button></td></tr>
 
<tr><td><input value="上移" type="button" onclick="upwards()"></button></td>
<td><input value="下移" type="button" onclick="downwards()"></button></td>
</tr>
</table>
 
</div>
</body>
</html>

效果图：

js+html5实现canvas绘制网页时钟的方法

希望本文所述对大家的web程序设计有所帮助。

js+html5实现canvas绘制网页时钟的方法

- Author -

tcxu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JSONP跨域请求
Mar 02 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
webpack打包js的方法
Mar 12 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 #Javascript
javascript RegExp 使用说明
May 21 #Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 #Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 #Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 #Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 #Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 #Javascript
缓存(3) 连接数(1) 策略(1) 弱口令(1) 逻辑架构(1) 锁(1) 性能优化(3) 内存(1) ipv6(1) 事务(5)
You might like
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
全面解析JavaScript里的循环方法之forEach，for-in，for-of
2020/04/20 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python编写一个优美的下载器
2018/04/15 Python
python基于http下载视频或音频
2018/06/20 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
利用python实现简易版的贪吃蛇游戏（面向python小白）
2018/12/30 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
python代码实现猜拳小游戏
2020/11/30 Python
MBA推荐信怎么写
2015/03/25 职场文书
文艺晚会开场白
2015/05/29 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
MongoDB使用场景总结
2022/02/24 MongoDB
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers