首页
所有分类
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 相关文章推荐
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
greenlet(1) Excel(4) 正则表达式(3) pytest(3) 进销存(1) 信息校验(1) 自动播放(1) Coroutine(1) gevent(1) csv(4)
You might like
再说下636单管机
2021/03/02 无线电
php输出xml属性的方法
2015/03/19 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
javascript学习网址备忘
2007/05/29 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
基于jquery的划词搜索实现（备忘）
2010/09/14 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
javaScript语法总结
2016/11/25 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王？
2019/10/10 DOTA
python实现雨滴下落到地面效果
2018/06/21 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
python 模块导入问题汇总
2021/02/01 Python
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
绿色家庭事迹材料
2014/05/01 职场文书
团干部培训方案
2014/06/03 职场文书
法院授权委托书范文
2014/08/02 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技