使用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中transform变换模型的渲染
May 27 HTML / CSS
css3动画效果抖动解决方法
Sep 03 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 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 分页类 扩展代码
2009/06/11 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
jquery JSON的解析方式
2009/07/25 Javascript
jquery动态添加option示例
2013/12/30 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python集合是否可变总结
2019/06/20 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python如何提升爬虫效率
2020/09/27 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
苹果Mac升级:MacSales.com
2017/11/20 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
2015新学期开学寄语
2015/02/26 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android