使用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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
Aug 14 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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中养成7个面向对象的好习惯
2010/01/28 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Javasript设计模式之链式调用详解
2018/04/26 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
js实现select下拉框选择
2020/01/11 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
如何运行Python程序的方法
2013/04/21 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
台湾专柜女包:KINAZ
2019/12/26 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
团结演讲稿范文
2014/05/23 职场文书
医德医风自我评价2015
2015/03/03 职场文书
企业法律事务工作总结
2015/08/11 职场文书
2019财务转正述职报告
2019/06/27 职场文书
浅谈python中的多态
2021/06/15 Python
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android