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 相关文章推荐
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
Sep 04 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
浅谈Webpack 是如何加载模块的
May 24 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
Vue中props的详解
May 16 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
js实现星星海特效的示例
Sep 28 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 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
JS 统计时间
2021/03/09 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
小程序实现留言板
2018/11/02 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
Python3基础之基本运算符概述
2014/08/13 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python实现电子产品商店
2019/02/26 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
Myprotein亚太地区:欧洲第一在线运动营养品牌
2020/12/20 全球购物
英文求职信结束语大全
2013/10/26 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
mysql函数全面总结
2021/11/11 MySQL