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程序设计有所帮助。

Javascript 相关文章推荐
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
video.js使用改变ui过程
Mar 05 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue制作抓娃娃机的示例代码
Apr 17 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
You might like
php 静态属性和静态方法区别详解
2017/04/09 PHP
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
Bootstrap实现各种进度条样式详解
2017/04/13 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Vue.js图片预览插件使用详解
2018/08/27 Javascript
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
Python 文件和输入输出小结
2013/10/09 Python
python通过加号运算符操作列表的方法
2015/07/28 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
2014自荐信的写作技巧
2014/01/28 职场文书
员工考核管理制度
2014/02/02 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
运动会加油稿
2015/07/22 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python