话不多说，直接上代码

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>时钟</title>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript” src=”js/shizhong.js”></script>

<style type=”text/css”>

#myCanvas {

opacity: 0.8;

-webkit-animation: roll 3s;

animation: roll 3s;

}

@-webkit-keyframes roll {

from{-webkit-transform:rotate(360deg);opacity:0;}

to{-webkit-transform:rotate(0deg);opacity:0.8;}

}

@keyframes roll {

from{transform:rotate(360deg);opacity:0;}

to{transform:rotate(0deg);opacity:0.8;}

}

</style>

</head>

<body>

<br /><br />

<div style=”width:150px;margin:0 auto;”>

<canvas id=”myCanvas” width=”150″ height=”150″></canvas>

</div>

<!– 时钟悬浮网页游动

<script>

var x = 50,y = 60;//图片距离顶部的位置

var xin = true, yin = true

var step = 1 //图片移动的步速 越高越快

var delay = 10 //图片移动延时 越高越慢

var obj=document.getElementById(“myCanvas”)

function float() {

var L=T=0

var R= document.documentElement.clientWidth-obj.offsetWidth //offsetHeight 则是网页内容实际高度

var B = document.documentElement.clientHeight-obj.offsetHeight // clientHeight 就是透过浏览器看内容的这个区域高度。

obj.style.left = x + document.documentElement.scrollLeft + “px”;

obj.style.top = y + document.documentElement.scrollTop + “px”;

x = x + step*(xin?1:-1)

if (x < L) { xin = true; x = L}

if (x > R){ xin = false; x = R}

y = y + step*(yin?1:-1)

if (y < T) { yin = true; y = T }

if (y > B) { yin = false; y = B }

}

var itl= setInterval(“float()”, delay)

obj.onmouseover=function(){clearInterval(itl)}

obj.onmouseout=function(){itl=setInterval(“float()”, delay)}

</script>

–>

</body>

</html>

　　

shizhong.js内容

$(function(){

var iNow = 0;

var arr = [“#ffae00″,”black”];

myClock();

myday();

setInterval(myClock,1000);//每一秒钟重绘一次

setInterval(myday,1000);

function myday(){

var a = new Array(“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”);

var week = new Date().getDay();

var dateDom=new Date();

var year=dateDom.getFullYear();

var month=dateDom.getMonth()+1;

var day=dateDom.getDate();

var mm=year+”-“+month+”-“+day;

var myCanvas = document.getElementById(“myCanvas”);

var cxt=myCanvas.getContext(“2d”);

cxt.font=”14px 黑体”;

//绘制实心字

cxt.fillStyle=”red”;//填充红色

cxt.fillText(mm,50,105);

for(var ind=0;ind<6;ind++){

if(week==ind){

var myCanvas = document.getElementById(“myCanvas”);

var cxt=myCanvas.getContext(“2d”);

cxt.font=”14px 黑体”;

//绘制实心字

cxt.strokeStyle=”red”;//填充红色

cxt.strokeText(a[ind],55,55);

}

}

}

function myClock(){

//得到年月日

var myCanvas = document.getElementById(“myCanvas”);

var oC = myCanvas.getContext(“2d”);

//得到时分秒

var now = new Date(),

sec = now.getSeconds(),

min = now.getMinutes(),

hour = now.getHours();

hour = hour>=12 ? hour-12 : hour;

iNow++;

iNow = iNow%2;

oC.save();//save():保存当前环境的状态

//初始化画布

oC.clearRect(0,0,myCanvas.width,myCanvas.height);//clearRect:在给定的矩形内清除指定的像素

oC.translate(75,75);//translate:重新映射画布上的 (0,0) 位置

oC.scale(0.5,0.5);//scale:缩放当前绘图至更大或更小

oC.rotate(-Math.PI/2);//rotate:旋转当前绘图

// Math.PI: PI 属性就是 π，即圆的周长和它的直径之比

//白色背景

oC.save();

oC.fillStyle = “#ccc”;

oC.beginPath();//beginPath:起始一条路径，或重置当前路径

oC.arc(0,0,14+0,0,Math.PI*2,true);//arc:创建弧/曲线（用于创建圆形或部分圆）

oC.fill();//fill:填充当前绘图（路径）

oC.restore();//restore:返回之前保存过的路径状态和属性

oC.strokeStyle = “#548B54”;//strokeStyle:设置或返回用于笔触的颜色、渐变或模式

oC.fillStyle = “black”;//fillStyle:设置或返回用于填充绘画的颜色、渐变或模式

oC.lineWidth = 4;//设置或返回当前的线条宽度

oC.lineCap = “round”; //设置或返回线条的结束端点样式

//时针刻度

oC.save();

oC.beginPath();

for(var i=0; i<12; i++){

oC.moveTo(110,0);//把路径移动到画布中的指定点，不创建线条

oC.lineTo(120,0);//添加一个新点，然后在画布中创建从该点到最后指定点的线条

oC.rotate(Math.PI/6);//旋转当前绘图

}

oC.stroke();//绘制已定义的路径

oC.restore();

//分针刻度

oC.save();

oC.fillStyle = “black”;

oC.lineWidth = 2;

oC.beginPath();

for(var i=0; i<60; i++){

if(i%5 != 0){

oC.moveTo(116,0);

oC.lineTo(120,0);

}

oC.rotate(Math.PI/30);

}

oC.stroke();

oC.restore();

oC.save();

oC.rotate(Math.PI/2);

oC.font = “30px impact”;

//12点

oC.fillText(“12”,-15,-80);

oC.fillText(“1”,40,-75); //文本的 x 坐标位置,文本的 y 坐标位置

oC.fillText(“2”,80,-35);

//3点

oC.fillText(“3”,88,13);

//6点

oC.fillText(“6”,-8,104);

//9点

oC.fillText(“9”,-103,11);

oC.restore();

//画时针

oC.save();

oC.strokeStyle = “#ff3300”;

oC.rotate((Math.PI/6)*hour+(Math.PI/360)*min+(Math.PI/21600)*sec);

oC.lineWidth = 8;

oC.beginPath();

oC.moveTo(-20,0);

oC.lineTo(60,0);

oC.stroke();

oC.restore();

//画分针

oC.save();

oC.rotate((Math.PI/30)*min+(Math.PI/1800)*sec);

oC.strokeStyle = “#27A9E3”;

oC.lineWidth = 6;

oC.beginPath();

oC.moveTo(-28,0);

oC.lineTo(90,0);

oC.stroke();

oC.restore();

//画秒针

/*oC.save();

oC.rotate(sec*Math.PI/30);

oC.strokeStyle = “#D40000”;

oC.lineWidth = 3;

oC.beginPath();

oC.moveTo(-30,0);

oC.lineTo(105,0);

oC.stroke();

oC.restore();*/

//风车秒针

oC.save();

oC.rotate(sec*Math.PI/30);

oC.save();

oC.fillStyle = “#f23”;

oC.beginPath();

oC.arc(94,0,10,0,Math.PI,true);

oC.fill();

oC.restore();

oC.save();

oC.rotate(Math.PI/2);

oC.fillStyle = “#ffae00”;

oC.beginPath();

oC.arc(10,-84,10,0,Math.PI,true);

oC.fill();

oC.restore();

oC.save();

oC.fillStyle = “#27A9E3”;

oC.beginPath();

oC.arc(74,0,10,Math.PI,Math.PI*2,true);

oC.fill();

oC.restore();

oC.save();

oC.rotate(Math.PI/2);

oC.fillStyle = “#0eaf52”;

oC.beginPath();

oC.arc(-10,-84,10,Math.PI,Math.PI*2,true);

oC.fill();

oC.restore();

oC.restore()

//风车秒针

//表框

oC.save();

oC.lineCap = “butt”;

oC.lineWidth = 16;

oC.save();

oC.strokeStyle = “#BBFFFF”;

oC.beginPath();

oC.arc(0,0,142,0,Math.PI*2,true);

oC.stroke();

oC.restore();

oC.save();

oC.strokeStyle = “#C0FF3E”;

oC.beginPath();

oC.arc(0,0,142,0,Math.PI/iNow*5/3,true);

oC.stroke();

oC.restore();

oC.restore();

//中心点

oC.save();

oC.fillStyle = “#fff”;

oC.beginPath();

oC.arc(0,0,4,0,Math.PI*2,true);

oC.fill();

oC.restore();

oC.restore();

};

});

　　

canvas时钟效果的更多相关文章

  1. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  2. canvas实现的时钟效果

    最近在网上看到了一个css3实现的可爱时钟,觉得很nice,然后就想着用canvas试试实现这个时钟效果. 首先,要实现时钟需要先计算时钟上的数字应该占整个圆的大小. 因为一个圆是360度,所以数字之 ...

  3. 基于canvas的原生JS时钟效果

    概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...

  4. Coffeescript实现canvas时钟

    前言 参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思. 把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画.而Mozilla 官方教程画图实现的思路有意 ...

  5. transform实现的时钟效果

    又来一个时钟效果了,这个的实现不需要canvas,都是div.ul.li画出的,好玩有真实. 哈哈~ 需要的js才能实现到走动这个效果,但js的内容不多,也不难. 主要是一个css里transform ...

  6. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  7. 圆盘时钟效果 原生JS

    圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...

  8. Flash AS实现时钟效果（全脚本实现）

    最近工作中用到个Flash效果,好久没有写FlashAS脚本了,就想从以前写的代码中找一些实例.竟然看到硬盘中还留有若干年前的代码. 这个时钟效果是全部采用脚本实现,图形也是用脚本绘制的.写于2005 ...

  9. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

随机推荐

  1. [技巧篇]03.关于MyBatis的简单批量处理

  2. 图论：Prufer编码

    BZOJ1211:使用prufer编码解决限定结点度数的树的计数问题 首先学习一下prufer编码是干什么用的 prufer编码可以与无根树形成一一对应的关系 一种无根树就对应了一种prufer编码 ...

  3. [Luogu 3701] 「伪模板」主席树

    [Luogu 3701] 「伪模板」主席树 这是一道网络流,不是主席树,不是什么数据结构,而是网络流. 题目背景及描述都非常的暴力,以至于 Capella 在做此题的过程中不禁感到生命流逝. S 向 ...

  4. HDFS error

    错误信息描述: HDFS error: could only be replicated to 0 nodes, instead of 1;以及由此衍生出来的种种奇葩问题(具体的错误信息见后面),下面 ...

  5. Jmeter-12-如何使用Plugin Manager

    1. 搜索 Jmeter plugin 并找到plugin manager 下载jar文件 2. 放到jmeter/lib/ext下面, 重启jmeter 3. 找到选项-> Plugin ma ...

  6. 完全背包问题入门 （dp）

    问题描述: 有n种重量和价值分别为Wi,Vi的物品,从这些中挑选出总重量不超过W的物品,求出挑选物品的价值总和的最大值,每种物品可以挑选任意多件. 分析: 令dp[i+1][j]表示从前i件物品中挑选 ...

  7. JAVA 非对称加密算法RSA

    非对称加密算法 RSA过程 : 以甲乙双方为例 1.初始化密钥 构建密钥对,生成公钥.私钥保存到keymap中 KeyPairGenerator ---> KeyPair --> RSAP ...

  8. 3.0docker操作

    登录镜像资源 docker login daocloud.io username: password: docker login : 登陆到一个Docker镜像仓库,如果未指定镜像仓库地址,默认为官方 ...

  9. arch中yaourt的安装和使用

    yaourt-Yet AnOther User Repository Tool Yaourt是archlinux方便使用的关键部件之一,但没有被整合到系统安装中的工具.建议在装完系统重启之后,更新完p ...

  10. bisai2.py

    比赛专用py #!/usr/bin/env python #encoding:utf- #by i3ekr import re,requests,os res = "(flag{.*?}&q ...