话不多说，直接上代码

<!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. ACM1558两线段相交判断和并查集

    Segment set Problem Description A segment and all segments which are connected with it compose a seg ...

  2. Leetcode 234. 回文链表(进阶)

    1.题目描述 请判断一个链表是否为回文链表. 示例 1: 输入: 1->2 输出: false 示例 2: 输入: 1->2->2->1 输出: true 进阶: 你能否用 O ...

  3. Spark Streaming 的一些问题

    Spark Streaming 的一些问题,做选型前关注这些问题可以有效的降低使用风险. checkpoint checkpoint 是个很好的恢复机制.但是方案比较粗暴,直接通过序列化的机制写入到文 ...

  4. SQL Server2000安装教程图解

    sql2000安装教程图解... ================================= 第一部分:下载所需要的安装包: 可以自己在网上百度了之后下载--或是直接从我已打包好的群里下载 = ...

  5. [洛谷P3401] 洛谷树

    洛谷题目连接:洛谷树 题目背景 萌哒的Created equal小仓鼠种了一棵洛谷树! (题目背景是辣鸡小仓鼠乱写的QAQ). 题目描述 树是一个无环.联通的无向图,由n个点和n-1条边构成.树上两个 ...

  6. kafka命令总结

    ./kafka-console-consumer.sh  --bootstrap-server IP:9092  --topic user-asset-change-v1 --partition 2  ...

  7. 完美解决小米pro风扇乱转的问题

    新买的小米Pro顶配,发现CPU高于20%的时候就开始狂响,最后找到了解决的方法,但是不知道会有什么影响.方法如下: 在平衡模式下更改高级电源设置--->处理器电源管理--->最大出来状态 ...

  8. 在非ARC工程中使用ARC库

    选中工程->TARGETS->相应的target然后选中右侧的“Build Phases”,向下就找到“Compile Sources”了.为对应的库文件添加:-fobjc-arc参数即可 ...

  9. Different Integers（牛客多校第一场+莫队做法）

    题目链接:https://www.nowcoder.com/acm/contest/139/J 题目: 题意:给你n个数,q次查询,对于每次查询得l,r,求1~l和r~n元素得种类. 莫队思路:1.将 ...

  10. 01背包问题的延伸即变形 （dp）

    对于普通的01背包问题,如果修改限制条件的大小,让数据范围比较大的话,比如相比较重量而言,价值的范围比较小,我们可以试着修改dp的对象,之前的dp针对不同的重量限制计算最大的价值.这次用dp针对不同的 ...