使用html5的canvas标签制作时钟。

html html5 canvas 浏览器

复制代码,粘贴在记事本中,另存为colock.html在浏览器中打开就可以看到效果。
我的html5时钟
width="500" height="500" id="clock" >
function drawClock()
{
var clock=document.getElementByIdx_x('clock');
var cxt=clock.getContext('2d');
var now=new Date();
var sec=now.getSeconds();
var min=now.getMinutes();
var hou=now.getHours();
hou=hou>12?(hou-12+min/60):(hou+min/60);
cxt.clearRect(0,0,500,500);
cxt.beginPath();
cxt.lineWidth="10";
cxt.stroke;
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
for(var i=0;i<12;i++)
{
cxt.save();
cxt.translate(250,250);
cxt.stroke;
cxt.lineWidth="9";
cxt.rotate(i*30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-197);
cxt.lineTo(0,-180);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
for(var i=0;i<60;i++)
{
cxt.save();
cxt.translate(250,250);
cxt.stroke;
cxt.lineWidth="3";
cxt.rotate(i*6*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,-197);
cxt.lineTo(0,-188);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
cxt.beginPath();
cxt.lineWidth="10";
cxt.save();
cxt.translate(250,250);
cxt.stroke;
cxt.beginPath();
cxt.rotate(hou*30*Math.PI/180);
cxt.stroke();
cxt.closePath();
cxt.moveTo(0,10);
cxt.lineTo(0,-80);
cxt.stroke();
cxt.closePath();
cxt.restore();
cxt.beginPath();
cxt.lineWidth="6";
cxt.save();
cxt.translate(250,250);
cxt.stroke;
cxt.beginPath();
cxt.rotate(min*6*Math.PI/180);
cxt.stroke();
cxt.closePath();
cxt.moveTo(0,10);
cxt.lineTo(0,-120);
cxt.stroke();
cxt.closePath();
cxt.restore();
cxt.beginPath();
cxt.lineWidth="3";
cxt.save();
cxt.translate(250,250);
cxt.stroke;
cxt.beginPath();
cxt.rotate(sec*6*Math.PI/180);
cxt.stroke();
cxt.closePath();
cxt.moveTo(0,10);
cxt.lineTo(0,-150);
cxt.stroke();
cxt.closePath();
cxt.beginPath();
cxt.stroke;
cxt.arc(0,-125,6,0,360,false);
cxt.stroke();
cxt.fill;
cxt.fill();
cxt.closePath();
cxt.restore();
cxt.beginPath();
cxt.save();
cxt.translate(250,250);
cxt.arc(0,0,6,0,360,false);
cxt.stroke();
cxt.fill;
cxt.fill();
cxt.restore();
cxt.closePath();
var year=now.getFullYear();
var month=now.getMonth();
var day=now.getDate();
cxt.save();
cxt.beginPath();
cxt.translate(250,250);
cxt.font="20px 宋体";
cxt.fillText("今天是"+year+"年"+month+"月"+day+"日",-100,120);
cxt.restore();
cxt.closePath();
}
drawClock();
setInterval(drawClock,1000);


相关推荐

  • 如何制作条码标签 在网上看到有人提出这样的问题:如何制作条码标签?问题补充要制作code128条码。然后就看到这样的回答:下载领跑(LabelPainter)条码标签设计系统,打开软件---新建标签点击确定---左侧工具栏---选中一维条码----在白色区域
  • 如何制作条码标签 条码标签的制作目前可以分为主流的两种。1.条码标签印刷机,印刷机与打印机的生产量上有着明确的不一样,印刷每年能满足30万平米以上的打印量,但是在质量方面则不如条码打印机。2.条码标签打印机,这种形式打印适合轻、重工业,每天需求量不是非常之大
  • Canvas标签 canvas标签:元素用于图形的绘制,通过脚本(通常是javaScript)来完成标签只是图形容器,必须用脚本来绘制图形可通过多种方法使用Canvas绘制路径、盒、圆API:https://developer.mozilla.org/zh-
  • 云标签,关键字图排版 html5 canvas版(一) 湖北指数武汉PHP实训最近业余时间在做一个云标签相关的信息展现.大体做成的情况能像微博关键字一样形成这样的图形:在做的过程傍边,查阅了一些资料,发现自己有点out了,在国外已经在wordle.net这样的网站.也有一个叫做信息视觉化(Inf
  • shunjia新款的不干胶标签制作手法 shunjia新款的不干胶标签制作手法目前,在不干胶行业中最常见的不干胶标签制作手法就是两步法,意味印刷和深加工分别布置在两部不同的生产设备上制作。与传统的联机加工截然不同的一种不干胶标签制作手法,这种手法解决了联机加工不能一次性完成多种不
  • 防伪标签印刷制作技术 不断添加的公司需求进行防伪标签制作,对于假货如此很多的今天,假设不做防伪,那被造假分子很多复制就会成为可预见的将来。虽然很多公司知道这种情况,但是他们不知道如何初步制作防伪。防伪标签技术运用:1、团花:在不干胶防伪标签上面打印各种鲜花的版纹
  • 几种常用的条码标签制作方式 准确、高效采集数据是一个好的自动化信息管理程序的基础。如果这些数据主要来自条码标签,那就必须决定选择何种标签的印制方式,是预先印制,还是现场打印,也就是,是购买打印好或印制好的标签还是自己打印标签?在自动识别工业中,我们可将“制作和购买”的
  • 防伪标签制作,印刷防伪标签 防伪标签制作,定制防伪标签,印刷防伪标签134.161.//95045!!!越来越多的企业需要进行防伪标签制作,对于假货如此泛滥的今天,如果不做防伪,那被造假分子大量仿造就会成为可预见的未来。虽然很多企业知道这种情况,但是他们不知道怎么开始
  • 自动识别系统将特殊条码标签制作 送货标签的制作自动化公司的送货程序随着技术的进步而改进。它从蜡版的包装发展到使用订制的标签,最后到在出货现场印制标签由人工张贴在包装箱上。下步则是进入自动化。"我们以往的标签系统不很灵活,我们不能对客户要求的变化作出迅速的反应。"为了使一个
  • 长沙麦肯标识与中国邮政江永县支行签订标识标牌制作合同 近日,长沙麦肯标识与中国邮政江永县支行签订标识标牌制作合同,合同服务内容包括:平面牌、大堂牌制作等内容。中国邮政江永县支行坚持普惠金融理念,自觉承担“普之城乡,惠之于民”的社会责任,走出了一条服务“三农”、服务中小企业、服务社区的特色发展之
  • 防伪标签材料有哪些?防伪标签制作厂家 有关防伪方面的任何问题请联系刘小姐135.2769.9954防伪标签底材(即基础材料)是防伪标签的重要组成部分,为其实现防伪功能提供重要保障,很多时候材料本身也影响甚至决定其防伪标签性能。随着社会发展和相关印刷技术的进步,防伪标签材料也更加
  • 电码防伪标签制作流程,电码防伪标签查询方式 电码防伪标签制造流程,电码防伪标签查询办法一、电码防伪标签特色1、标识的仅有性,任何一枚数码防伪标识物都是仅有的;且只能一次性全程运用,假冒者无法拷贝重复运用。2、区分的简便性,消费者不论在何时何地均可经进程控电话输入标识上的编码,由计算机

你的评论

就没有什么想说的吗?

最新博客

关于我们 加入传客 媒体报道 帮助中心 传客活动 免责声明 联系我们 移动版 移动应用

©2017传客网    琼ICP备15003173号-2    

本站部分文章来源于互联网,版权归属于原作者。
本站所有转载文章言论不代表本站观点,如是侵犯了原作者的权利请发邮件联系站长(weishubao@126.com),我们收到后立即删除。
站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!

X