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 相关文章推荐
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
Javascript面向对象编程
Mar 18 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
javascript实现拼图游戏
Jan 29 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
python使用Pycharm创建一个Django项目
2018/03/05 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python 解决函数返回return的问题
2020/12/05 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
运动会领导邀请函
2014/02/05 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
元宵节寄语大全
2015/02/27 职场文书
怎么用Python识别手势数字
2021/06/07 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电