html5星期,HTML5 时钟
/p>
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
xmlns="http://www.w3.org/1999/xhtml">
content="text/html; charset=utf-8" />
HTML5实现时钟
window.οnlοad=function(){
var
ctx=document.getElementByIdx_x("mycanvas").getContext("2d");
var mycanvas=document.getElementByIdx_x("mycanvas");
var cwidth=200;
var cheight=200;
ctx.translate(cwidth/2+40,cheight/2-25); //将基点移动到中心
var len=cwidth/2;
//alert("hi");
function drawWatch(){
ctx.clearRect(-cwidth/2,-cheight/2,cwidth,cheight);
var tlen=len*0.65; //画数字
ctx.font="14px 'Arial";
ctx.fillStyle="#000";
ctx.textAlign="center";
ctx.textBaseline="middle";
for(var i=0;i<12;i++){
var tag1=Math.PI*2*(3-i)/12;
var tx=tlen*Math.cos(tag1);
var ty=-tlen*Math.sin(tag1);
if(i==0) ctx.fillText(12,tx,ty);
else
ctx.fillText(i,tx,ty);
}
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
if(h>12) h=h-12;
//绘制时针
var angle1=Math.PI*2*(3-(h+m/60))/12;
var length1=len*0.3;
var width1=5;
var color1="#000";
drawHand(angle1,length1,width1,color1);
//绘制分针
var angle2=Math.PI*2*(15-(m+s/60))/60;
var width2=3;
var length2=len*0.45;
var color2="#555555";
drawHand(angle2,length2,width2,color2);
//绘制秒针
var angle3=Math.PI*2*(15-s)/60;
var length3=len*0.55;
var width3=1;
var color3="#aa0000";
drawHand(angle3,length3,width3,color3);
}
function drawHand(angle,len,width,color){
var x=len*Math.cos(angle);
var y=-len*Math.sin(angle);
ctx.strokeStyle=color;
ctx.lineWidth=width;
ctx.lineCap="round"; // 把针尖设置为圆形
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(x,y);
ctx.stroke();
}
setInterval(drawWatch,1000);
}
html5星期,HTML5 时钟相关推荐
- HTML5 Canvas爱心时钟代码
这是一款数字时钟动画,数字又多个小爱心组成,又何问起整理,随着时间推进,每一秒钟新数字替换旧数字,旧数字离去使用天女散花动画,花是五颜六色的. 查看效果: http://hovertree.com/t ...
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
- html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
- html5canvas绘制时钟,JavaScript html5 canvas绘制时钟效果
本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: canvas绘图 JavaScript部分: function init() ...
- html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟 鼠标悬浮 图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果 代码结构 1. 引入CSS 2. HTML代码 va ...
- html数字时间效果图,html5图片数字时钟代码
特效描述:html5 图片数字时钟代码.html5图片数字时钟代码 代码结构 1. HTML代码 img{ width: 25px; height: 25px; } html5图片数字时钟代码 f ...
- 兄弟连html5在线画板,IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容
原标题:IT兄弟连 HTML5教程 HTML5做到了与之前版本的兼容 为了保证HTML5能与之前的HTML版本达到最大的兼容,HTML5对一些元素标记的省略.boolean值的属性,以及引号的省略这几 ...
- 对html5的了解,HTML5——对HTML5的认识
首先非常感谢李刚老师出的这本书<HTML5/CSS3/JavaScript讲义>,今天读了第一章节的内容,趁热打铁,总结一下. HTML5的时代已经到来,它对所有的前端开发人员来说是一种福 ...
- html5发展前景-兄弟连,IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生
原标题:IT兄弟连 HTML5教程 HTML5的曲折发展过程 HTML5的诞生 十年磨一剑,正如我们所看到的一样,HTML5大潮正来势汹汹.但也正如我们所知道的一样,HTML5是一种技术标准,它的语义 ...
最新文章
- linux 读取命令行输入,Linux read命令的使用
- echart的关系图高亮_echart中饼状图的高亮显示。
- 大型网站架构系列:电商网站架构案例(2)
- uCOS-II 学习笔记--------OSInit函数
- XTU -1231 人生成就 (dp + 记录最优解的个数)
- P2085 最小函数值 堆
- C++ const关键字总结
- Oracle中是用case...when语句进行判断
- Android应用程序窗口(Activity)的运行上下文环境(Context)的创建过程分析
- 华为OSPF中silent-interface语句介绍
- java u盘检测工具,BadUSB测试记录
- 使用grldr文件引导windows xp、ubuntu系统
- 通过requests获取网络上图片的大小
- Webpack Chunk 分包规则
- ZXing实现横竖屏扫描切换
- 达达php源码,达达房卡麻将二次开发VIP系统学习课程
- 6 个超酷的学习算法网站,Leetcode 不是第一 ?
- MediBang Paint Pro 漫画及插画工作软件
- C++习题06(01)函数模板
- 无线Mesh网络技术
热门文章
- 变与不变: Undo构造一致性读的例外情况
- VRAR产业峰会暨第二届华为VR开发应用大赛颁奖典礼在和平区成功举办
- 区块链交易隐私如何保证?华为零知识证明技术实战解析
- “互联网+”大赛之智慧校园 赛题攻略:你的智慧校园,WeLink帮你来建
- 云图说|ASM灰度发布,让服务发布变得更敏捷、更安全
- 带你彻底搞懂高性能网络模式Reactor 和 Proactor
- 云原生2.0时代:企业更应了解一下容器安全
- 利用MSFM算法计算程函方程的走时CT胖射线反演法
- Windows平台下sbt的安装设置
- 给定一个数组 prices计算其利润最大