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 相关文章推荐
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php中替换字符串中的空格为逗号','的方法
2014/06/09 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
js 程序执行与顺序实现详解
2013/05/13 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python 字符串操作方法大全
2014/03/11 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
高中化学教学反思
2014/01/13 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
人力资源管理毕业生自荐信
2014/06/26 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
家长会欢迎词
2015/01/23 职场文书
放假通知
2015/04/14 职场文书
春季运动会加油词
2015/07/18 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
导游词之天下银坑景区
2019/11/21 职场文书