使用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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
html5的canvas方法使用指南
Dec 15 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 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
德生PL990的分析评价
2021/03/02 无线电
php学习 字符串课件
2008/06/15 PHP
一道关于php变量引用的面试题
2010/08/08 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
DWR Ext 加载数据
2009/03/22 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
简单js代码实现selece二级联动(推荐)
2014/02/18 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
有趣的python小程序分享
2017/12/05 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
服务承诺书范文
2014/05/19 职场文书
春节超市活动方案
2014/08/14 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA