JavaScript html5 canvas绘制时钟效果


Posted in Javascript onMarch 01, 2016

本文实例讲述了JavaScript+html5 canvas绘制时钟效果。分享给大家供大家参考,具体如下:

 HTML部分:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
 <title>canvas绘图</title>
</head>
<body onload="init()">
<canvas id="canvas" width="200px" height="200px"></canvas>
</body>
</html>

JavaScript部分:

function init(){
 var canvas = document.getElementById("canvas"),
  context = canvas.getContext("2d");

 setInterval(function(){draw(canvas, context)},1000);
}
function draw(canvas, context){
 var x = canvas.width,
  y = canvas.height,
  r = Math.min(x/2, y/2);

 context.clearRect(0, 0, x, y); //清除绘画历史
 //绘画钟框
 context.fillStyle = "#f1f1f1";
 drawCircle(context, x, y, r);
 //绘画文字
 var tx = x/2,ty = y/2,tr = 0.8*r;
 context.font = "bold 12px 微软雅黑";
 context.fillStyle = "#000";
 drawText(context, "1", tx + 0.5*tr,ty - 0.866*tr);
 drawText(context, "2", tx + 0.866*tr, ty - 0.5*tr);
 drawText(context, "3", tx + tr, ty);
 drawText(context, "4", tx + 0.866*tr, ty + 0.5*tr);
 drawText(context, "5", tx + 0.5*tr, ty + 0.866*tr);
 drawText(context, "6", tx, ty + tr);
 drawText(context, "7", tx - 0.5*tr, ty + 0.866*tr);
 drawText(context, "8", tx - 0.866*tr, ty + 0.5*tr);
 drawText(context, "9", tx - tr, ty);
 drawText(context, "10", tx - 0.866*tr, ty - 0.5*tr);
 drawText(context, "11", tx - 0.5*tr, ty - 0.866*tr);
 drawText(context, "12", tx, ty - tr);
 //获取当前时间
 var date = new Date(),
  h = date.getHours(),
  m = date.getMinutes(),
  s = date.getSeconds(),
  angleH = (360/12)*Math.PI/180,
  angleM = (360/60)*Math.PI/180
 context.strokeSyle = "#000";
  //绘制时刻度
  drawScale(context, x, y, r, angleH, -0.88*r, -0.96*r, 3);
  //绘制分刻度
  drawScale(context, x, y, r, angleM, -0.93*r, -0.96*r, 1);
 //绘画时分秒针
 drawCircle(context, x, y, 3);
 drawNeedle(context, x, y, r, h*angleH + m*angleM/12, -0.5*r);
 drawNeedle(context, x, y, r, m*angleM + s*angleM/60, -0.6*r);
 drawNeedle(context, x, y, r, s*angleM, -0.75*r);

}
//绘画圆
function drawCircle(context, x, y, r){
 context.save();
 context.beginPath();
 context.arc(x/2, y/2, r, 0, Math.PI*2, 0);
 context.fill();
 context.closePath();
 context.restore();
}
//绘画文字方法
function drawText(context, text, x, y){
 context.save();
 x -= (context.measureText(text).width/2);
 y += 4;
 context.translate(x, y);
 context.fillText(text, 0, 0);
 context.restore();
}
//绘制刻度方法
function drawScale(context, x, y, r, rotate, start, end, lineWidth){
 context.save();
 context.beginPath();
 context.translate(x/2,y/2);
 context.lineWidth = lineWidth;
 for (var i = 0; i < 60; i++) { 
  context.rotate(rotate);
  context.moveTo(0, start); 
  context.lineTo(0, end);
 }
 context.closePath();
 context.stroke();
 context.restore();
}
//绘画时分秒针方法
function drawNeedle(context, x, y, r, rotate, line){
 context.save();
 context.translate(x/2,y/2);
 context.beginPath();
 context.rotate(rotate);
 context.moveTo(0, 0.1*r);
 context.lineTo(0, line);
 context.closePath();
 context.stroke();
 context.restore();
}

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

Javascript 相关文章推荐
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
js实现购物车功能
Jun 12 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
JS实现图片切换效果
Nov 17 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 Javascript
javascript使用Promise对象实现异步编程
Mar 01 #Javascript
javascript html5实现表单验证
Mar 01 #Javascript
javascript中FOREACH数组方法使用示例
Mar 01 #Javascript
JS实现Select的option上下移动的方法
Mar 01 #Javascript
angular2使用简单介绍
Mar 01 #Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 #Javascript
Bootstrap每天必学之导航条(二)
Mar 01 #Javascript
You might like
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python3图片转换二进制存入mysql
2013/12/06 Python
记录Django开发心得
2014/07/16 Python
Python3生成手写体数字方法
2018/01/30 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
园林施工员岗位职责
2013/12/11 职场文书
主题党日活动总结
2014/07/08 职场文书
农村文化活动总结
2014/08/28 职场文书
招标保密承诺书
2015/01/20 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
结婚司仪主持词
2015/06/29 职场文书
导游词之西递宏村
2019/12/10 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
教你利用Selenium+python自动化来解决pip使用异常
2021/05/20 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL