当前位置: 传客网 > 使用html5的canvas标签制作时钟。

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

2017-01-11 作者:踮脚看

复制代码,粘贴在记事本中,另存为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、区分的简便性,消费者不论在何时何地均可经进程控电话输入标识上的编码,由计算机

  • 验厂,如何使用FSC认证标签?

    1、标准的FSC认证标签可以使用哪些图形元素:  FSC标志,FSC网址标签,标题标签,正文(如需要注产品类型)FSC认证标签,许可号等。  1)混合来源标签和回收标签中可选择使用莫比斯环。  2)在无足够的印刷空间加贴标准标签的情况下,可

  • 织梦5.7DEDECMS标签大全

    1.关键描述调用标签:#metaname="keywords"content="{:fieldname='keywords'/}"##metaname="description"content="{dede:fieldname='descr

  • 北京华育国际html基础教程-span标签

    北京华育国际html基础教程-span标签HTML基础教程之span标签这一小节讲span标签,咱们对、、这三个标签进行一下总结:和和标签是为了着重一段话中的关键字时运用,它们的语义是着重。span标签是没有语义的,它的效果就是为了设置独自

  • [团购]怎样制作的网站标签搜索引擎喜欢(上)

      怎么制作的网站标签搜索引擎爱佳(上)  首霞旱下标题title到设计技巧  Title是一个页面的中央,咱们seoer对页面优化的时候首先就是从title下手。而在SEO中,title的权重比较高,有没有书写佳title,有没有抓住关键

  • 光盘标签(纸)的制作\打印

    光盘标签(纸)的制作\打印最近心血来潮,想把自己刻的一些光盘做上封面,但在网上诳了许久也没一个能说到具体怎么做的,反复捣鼓几下也就做出来了。现在写出详细的制作方法,让有需要的刻录族不再为这些个简单的小操作而不知所措了^-^。我们随刻录机的N

  • 防伪标签(标识)类型防伪标签制作商

    一、关于防伪标签的定义:防伪标签是一种鉴别真伪、防止假冒的证明性标贴物。是商品流通过程中人们用于区别商品真假,区分商品品质优劣的标识。防伪标签又叫防伪标识(国家标准名称)。如果没有了防伪标签,那么流通市场就会出现一片混乱的景象,流通渠道就会

  • 新版织梦(DEDECMS)标签调用大搜集

    新版织梦(DEDECMS)标签调用大搜集 织梦(DEDECMS)文章Tag调用标签:{dede:tagtype='current'/}  织梦(DEDECMS)网站标题调用标签:{dede:globalname='cfg_webname'/

  • 很全的织梦标签大全

    ·dedecms标签·关键描述调用标签:··模板路径调用标签:{dede:fieldname='templeturl'/}··网站标题调用标签:{dede:globalname='cfg_webname'/}··栏目导航调用标签:首页{de

返回
顶部