html+js+显示文字时钟,JavaScript canvas实现文字时钟
本文实例为大家分享了canvas实现文字时钟的具体代码,供大家参考,具体内容如下
先看看效果图
代码
Document
您的浏览器不支持canvas
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(300,300);
function Clock(ctx){
this.ctx = ctx; // canvas 2d画笔
this.h = ''; // 小时
this.m = ''; // 分钟
this.s = ''; // 秒钟
this.year = ''; // 年份
this.mon = ''; // 月份
this.da = ''; // 日期
this.day = ''; // 星期
this.timer = null; // 定时器
this.numberText = ['零','一','二','三','四','五','六','七','八','九','十','十一','十二','十三','十四','十五','十六','十七','十八','十九','二十','二十一','二十二','二十三','二十四','二十五','二十六','二十七','二十八','二十九','三十','三十一'];
this.H=['零点','一点','二点','三点','四点','五点','六点','七点','八点','九点','十点','十一点','十二点','十三点','十四点','十五点','十六点','十七点','十八点','十九点','二十点','二十一点','二十二点','二十三点'];
this.M=['零分','一分','二分','三分','四分','五分','六分','七分','八分','九分','十分','十一分','十二分','十三分','十四分','十五分','十六分','十七分','十八分','十九分','二十分','二一分','二十二分','二十三分','二十四分','二十五分','二十六分','二十七分','二十八分','二十九分','三十分','三十一分','三十二分','三十三分','三十四分','三十五分','三十六分','三十七分','三十八分','三十九分','四十分','四十一分','四十二分','四十三分','四十四分','四十五分','四十六分','四十七分','四十八分','四十九分','五十分','五十一分','五十二分','五十三分','五十四分','五十五分','五十六分','五十七分','五十八分','五十九分'];
this.S=['零秒','一秒','二秒','三秒','四秒','五秒','六秒','七秒','八秒','九秒','十秒','十一秒','十二秒','十三秒','十四秒','十五秒','十六秒','十七秒','十八秒','十九秒','二十秒','二一秒','二十二秒','二十三秒','二十四秒','二十五秒','二十六秒','二十七秒','二十八秒','二十九秒','三十秒','三十一秒','三十二秒','三十三秒','三十四秒','三十五秒','三十六秒','三十七秒','三十八秒','三十九秒','四十秒','四十一秒','四十二秒','四十三秒','四十四秒','四十五秒','四十六秒','四十七秒','四十八秒','四十九秒','五十秒','五十一秒','五十二秒','五十三秒','五十四秒','五十五秒','五十六秒','五十七秒','五十八秒','五十九秒'];
this.draw = function(){
this.ctx.clearRect(-300,-300,600,600);
// 中心小黑圆
this.ctx.beginPath();
this.ctx.arc(0,0,5,0,Math.PI*2,true);
this.ctx.fill();
this.ctx.closePath();
// 画长横线
this.ctx.beginPath();
this.ctx.moveTo(0,0);
this.ctx.lineTo(280,0);
this.ctx.strokeStyle='#000';
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.font='12px 微软雅黑';
var yearText = '';
var arr = String(this.year).split('');
for(var n=0;n
var num = Number(arr[n]);
yearText += this.numberText[num];
}
var weekday = this.day === 0 ? '星期日': '星期'+this.numberText[this.day]; // 星期
var moText = this.numberText[this.mon]+'月'+ this.numberText[this.da]+'日';
this.ctx.fillText(yearText+'年',10,-10); // 年份的文字
this.ctx.fillText(moText,10,20); // 月份/日期/星期的文字
this.ctx.fillText(weekday,10,40); // 月份/日期/星期的文字
this.drawClock();
}
// 画刻度
this.drawClock = function(){
// 时钟
this.ctx.save(); // 保存当前状态
this.ctx.rotate(Math.PI / 12 * this.h);
for(var j=0; j < 24;j++){
this.ctx.beginPath();
var color = j === this.h ? '#000': '#ccc';
this.ctx.strokeStyle = color;
this.ctx.font='12px 微软雅黑';
this.ctx.strokeText(this.H[j],110,-5);
this.ctx.closePath();
this.ctx.rotate(-Math.PI / 12);
}
this.ctx.restore(); // 恢复到上一次的状态
// 分钟
this.ctx.save();
this.ctx.rotate(Math.PI / 30 * this.m);
for (var i=0; i < 60; i++){
this.ctx.beginPath();
var color = i === this.m ? '#000': '#ccc';
this.ctx.strokeStyle = color;
this.ctx.strokeText(this.M[i],170,-5);
this.ctx.closePath();
this.ctx.rotate(-Math.PI / 30);
}
this.ctx.restore();
// 秒钟
this.ctx.save();
this.ctx.rotate(Math.PI / 30 * this.s);
for (var k=0; k < 60; k++){
this.ctx.beginPath();
var color = k === this.s ? '#000': '#ccc';
this.ctx.strokeStyle = color;
this.ctx.strokeText(this.S[k],230,-5);
this.ctx.closePath();
this.ctx.rotate(-Math.PI / 30);
}
this.ctx.restore();
// ctx.rotate(-Math.PI / 30 * this.s);
}
// 初始化
this.init = function(){
var that = this;
this.timer = setInterval(function(){
that.setTime();
that.draw();
},100);
}
// 停止
this.stop = function(){
clearInterval(this.timer);
this.timer = null;
}
// 设置时间
this.setTime = function(){
var date = new Date();
this.year = date.getFullYear(); // 年, int
this.mon = date.getMonth()+1; // 月分, int
this.da = date.getDate(); // 日期, int
this.day = date.getDay(); // 星期, int
var hour = date.getHours(); // 时,int
var minu = date.getMinutes(); // 分,int
var sec = date.getSeconds(); // 秒,int
// 毫秒数/1000 ,这里主要是为了做帧动画
var minuScond = date.getMilliseconds()/1000;
var second; // 秒,计算秒旋转的角度, float
var minute; // 分,计算分钟的角度,float
var ho; // 小时,计算小时的角度,float
if(minuScond > 0.8){
second = Math.ceil(sec+ minuScond);
second = second >= 60? 0:second;
} else {
second = sec+ minuScond;
}
// 秒钟到了59,分钟要过渡
if(sec === 59) {
if(minuScond >= 0.8){
minute = Math.ceil(minu+ minuScond);
minute = minute >=60 ? 0: minute;
} else{
minute = minu + minuScond;
}
} else{
minute = minu;
}
// 秒数到了59和分钟数到了59;时针要过渡
if(sec === 59 && minu===59){
if(minuScond >= 0.8){
ho = Math.ceil(hour+ minuScond);
ho = ho >=24 ? 0: ho;
} else{
ho = hour + minuScond;
}
} else{
ho = hour;
}
this.h = ho; // 小时
this.m = minute; // 分钟
this.s = second; // 秒钟
}
}
var clock = new Clock(ctx);
clock.init();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html+js+显示文字时钟,JavaScript canvas实现文字时钟相关推荐
- android canvas添加文字居中,android Canvas drawText 文字居中
1首先利用canvas获取画布的宽高, //获取屏幕的宽和高 int width = canvas.getWidth(); int height = canvas.getHeight(); 2获取文字 ...
- html5网站粒子时钟,Html5 canvas实现粒子时钟的示例代码
这篇文章主要介绍了Html5 canvas实现粒子时钟的示例代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 我们先看看粒子时钟的效果,如下: 下面我们将通过canvas和js实 ...
- canvas文字居中;canvas画布文字右对齐;canvas画布文字左对齐;canvas文字自动换行;canvas设置行间距;
canvas参考手册 场景:画布绘制文本,使用 context.fillText(text,x,y,maxWidth).文本对其也就是设置xy坐标问题. 以下的画布设定宽度假设都是width:500 ...
- html字体颜色自动变化,js设置字体颜色_自动改变文字大小和颜色的js代码分享
摘要 腾兴网为您分享:自动改变文字大小和颜色的js代码分享,追追漫画,易信,学宝,万达普惠等软件知识,以及59网批,tomatopie,物美多点,直播apk,三国全面战争,pc98,qq音乐插件,快捷 ...
- 自学JavaScript第四天- JS 进阶:AJAX Promise Canvas
自学JavaScript第四天- JS 进阶:AJAX Promise Canvas AJAX 使用 XMLHttpRequest 使用 fetch() 方法 处理 AJAX 数据 安全限制 跨域方案 ...
- 图片在canvas中显示,给canvas添加文字,文字描边,将canvas保存成图片下载到本地
Canvas简介 HTML5新增标签 Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitma ...
- 将input中的光标移动到文字的末尾后,怎么用js显示光标当前的位置?
将input中的光标移动到文字的末尾后,怎么用js显示光标当前的位置? 鉴于加深对window.document的理解,写了点东西加深印象 需求: 在点击了编辑之后,直接重置光标的位置和显示光标当前所 ...
- html5 canvas 显示文字居中,html5 canvas 文字居中对齐
> web前端 > HTML 5 > 正文 html5 canvas 文字居中对齐 2013-07-09 我要投稿 [color=eight:25px]html部门 [color=e ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
最新文章
- ICANN敦促业界使用DNSSEC,应对DNS劫持攻击
- Hive1.2.1安装
- SESSION跟COOKIE
- matlab中partdata,[转载]meanshift算法
- Java Struts2 (一)
- 一个Linux下的 俄罗斯方块游戏,基于 ncurse 库。。
- Superhero Transformation
- c# getresponsestream返回byte[]_C# 基础知识系列-13 常见类库(三)
- 【数字图像处理】直方图均衡化详解及编程实现
- OSSIM中快速部署HIDS
- 华为服务器怎么查看系统日志,查询系统操作日志(operationlog)
- 用Mediator Pattern + Queue 解决 订单处理流程
- 下一站,北京-欢乐谷
- Deepin更换仿Mac主题(附Mac壁纸)
- 关于CUDA,cuDNN,TF,CUDA驱动版本兼容问题
- 浏览器 播放音频(IE,谷歌)
- 如何用腾讯云服务器搭建网站
- java jcp_太久了,JCP:Eclipse考虑了新的Java规范流程
- 常用的Transformation
- Google地图开发初级篇