使用html5 canvas 画时钟代码实例分享


Posted in HTML / CSS onNovember 11, 2015

HTML5足够强大实现很多功能,画一个时钟只是一个小玩意。图片指针用ctx的drawImage可以实现。至于兼容性问题,网上的解决方案已经很多了。这个东东是用来玩的,不是用来做应用的,学习下canvas API。

先给大家展示效果图

使用html5 canvas 画时钟代码实例分享

实现代码

复制代码
代码如下:

<script type="text/javascript">
// <![CDATA[
var time = new Date();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
var weekday={:'星期日',:'星期一',:'星期二',:'星期三',:'星期四',:'星期五',:'星期六'};
h=h>?(h-)*+parseInt(m/):h*+parseInt(m/); //时针 初始位置
//=====================================
var x=,y=,sAngle=; //x y 原点 秒针角度变量
function draw()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("d");
ctx.clearRect(,,c.width,c.height);
s++;//秒针
//背景
ctx.fillStyle = '#eee' // Make changes to the settings
ctx.globalAlpha = .;
ctx.fillRect(,,c.width,c.height); // Draw a rectangle with new settings
//===填充(表明)原点===
ctx.beginPath();
ctx.arc(x,y,,,true);
ctx.fill();
ctx.closePath();
var grd=ctx.createLinearGradient(x,y,,);
grd.addColorStop(,"#FF");
grd.addColorStop(.,"#FF");
grd.addColorStop(,"#FF");
ctx.fillStyle=grd;
ctx.font = "pt Arial";
ctx.fillText("html",,);
ctx.save();
// 时间刻度
for(var i=;i<;i++)
{
var angle=(Math.PI*)/;
ctx.beginPath();
var b=i==||i==||i==||i==
if(i%==){
if(b){
ctx.fillStyle="red";
radius=;
}
else{
ctx.fillStyle="blue";
radius=.;
}
ctx.font="px Arial";
ctx.fillText(i/==?:i/,x-,y-); //x大-右 小-左 y大小 数字刻度
}
else
{
ctx.fillStyle="#";
radius=;
}
if(s==i)radius=radius+;
ctx.arc(x,y-,radius,,true);
ctx.fill();
transform(ctx,x,y,angle,true);
}
ctx.restore();
//==========================
sAngle=(Math.PI*)/*s; //秒度
ctx.save(); //时针
ctx.fillStyle="red";
// ctx.strokeStyle="red";
ctx.lineWidth=;
transform(ctx,x,y,(Math.PI*)/*h,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
ctx.save();//分针转动
ctx.fillStyle="blue";
ctx.lineWidth=;
transform(ctx,x,y,(Math.PI*)/*m,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
//秒针转动
ctx.save();
ctx.fillStyle="#";
transform(ctx,x,y,sAngle,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
//数据整理
if(s%==){
sAngle=,s=,m++;
if(m==){ //每十二分 时针旋转一次
if(m!=)h++;
if(m%==)m=;
}
if(h%==)h=;
};
//*注:如果是放到外面 判断分针或时针转动 则满足条件时 都重复会运行 原因 每执行一遍 只有秒针 在时刻变动 *//
var dateString=time.getFullYear()+"年"+(time.getMonth()+)+"月"+time.getDate()+"日 "+weekday[time.getDay()]+" h:"+time.getHours()+" m:"+m+" s:"+s;
document.getElementById("d").innerHTML=dateString;
}
//指针三角!
function sj(ctx,x,y,x,y,x,y){
//====例====
// ctx.beginPath();
// ctx.moveTo(x,y);
// ctx.lineTo(x,y-);
// ctx.stroke();
// ctx.beginPath();
//
// ctx.moveTo(x-,y-);
// ctx.lineTo(x+,y-);
// ctx.lineTo(x,y--);
// ctx.fill();
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x,y);
ctx.lineTo(x,y);
ctx.fill();
}
//据坐标旋转
function transform(ctx,x,y,angle,b){
if(b){// 顺时针
ctx.transform(Math.cos(angle), Math.sin(angle),
-Math.sin(angle), Math.cos(angle),
x*(-Math.cos(angle)) + x*Math.sin(angle),
y*(-Math.cos(angle)) - y*Math.sin(angle))
}
}
//=====每秒执行============(执行事件自选)
window.setInterval(function(){draw()},);
// window.onload=function(){ //效果同上
// setInterval("draw()",);
// };
// ]]>
</script>
HTML / CSS 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
纯css3实现效果超级炫的checkbox复选框和radio单选框
Sep 01 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 #HTML / CSS
简单的HTML5初步入门教程
Sep 29 #HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 #HTML / CSS
简单介绍HTML5中audio标签的使用
Sep 24 #HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
Sep 21 #HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 #HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 #HTML / CSS
You might like
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python用for循环求和的方法总结
2019/07/08 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python tornado上传文件的功能
2020/03/26 Python
Python新手如何理解循环加载模块
2020/05/29 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
中学教师自我鉴定
2014/02/07 职场文书
医学生求职信
2014/07/01 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
老龙头导游词
2015/02/11 职场文书
教师辞职信范文
2015/02/28 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
安全第一课观后感
2015/06/18 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书