使用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 相关文章推荐
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
Oct 23 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
浅谈HTML5中dialog元素尝鲜
Oct 15 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
如何编写jquery插件
2017/03/29 jQuery
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue使用自定义icon图标的方法
2018/05/14 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
对Django url的几种使用方式详解
2019/08/06 Python
python设置随机种子实例讲解
2019/09/12 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
携程英文网站:Trip.com
2017/02/07 全球购物
学生个人求职自荐信格式
2013/09/23 职场文书
生产部经理岗位职责
2013/12/16 职场文书
学校教学工作总结2015
2015/05/19 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android
Go gorilla/sessions库安装使用
2022/08/14 Golang