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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
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 foreach循环使用详解与实例代码
2010/05/08 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
详解Python中最难理解的点-装饰器
2017/04/03 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
费用会计岗位职责
2014/01/01 职场文书
团委竞选演讲稿
2014/04/24 职场文书
全国文明单位申报材料
2014/05/31 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
党员自我评价2015
2015/03/03 职场文书
初中数学教学随笔
2015/08/15 职场文书
资产移交协议书
2016/03/24 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python