首页
所有分类
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 相关文章推荐
IE与FireFox中的childNodes区别
Oct 20 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
javascript中expression的用法整理
May 13 Javascript
JS跨域问题详解
Nov 25 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JS触摸与手势事件详解
May 09 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
node thread.sleep实现示例
Jun 20 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 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
Python(3) Pytesseract(1) GCN(1) 裁剪图片(1) 柱状图(1) 文字识别(1) 验证码(1) PIL(1) SFTP(3) 鲲鹏(1)
You might like
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
javascript常用函数归纳整理
2014/10/31 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
2017/05/05 jQuery
用vue构建多页面应用的示例代码
2017/09/20 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
详解flask表单提交的两种方式
2018/07/21 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
详解HTML5中的标签
2015/06/19 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
房屋产权证明书
2014/10/15 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python