话不多说，直接上代码

<!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. 003.关于数组的操作 [growing]

    1.获取数组的长度 #include<iostream> using namespace std; template<class T> int length(T& ar ...

  2. 关于我之前写的修改Windows系统Dos下显示的用户名之再修改测试

    最近看到蛮多网友反映,自己修改Dos下用户名后出现了很多的问题--今天抽了时间,再次修改测试... ================= 提前说明:我自己修改了很多次没发现任何问题,<为避免修改可 ...

  3. rename 批量重命名

    使用背景,对规则文件名批量重命名 例如: Send_Message_20160802_01_log.log Send_Message_20160802_02_log.log Send_Message_ ...

  4. 通过java客户端连接hbase 注意事项

    1.通过Java客户端连接Hbase,其中hbase通过zookeeper去管理,需要注意的是客户端端口. 通过在浏览器端输入地址查看:http://192.168.3.206:60010/maste ...

  5. Asp.Net Web Forms/MVC/Console App中使用Autofac

    本来简单介绍了Autofac在Asp.Net Web Forms中的应用,后来又添加了mvc.控制台应用程序中使用Autofac,详情请看源码. ASP.NET Web Forms使用Autofac, ...

  6. android程序员成长路径的思考

    我之前就想过要写这个话题,不过之前没有什么认识,我只是在阅读别人的见解,看法.昨天晚上,我阅读了这篇文章<产品经理罗永浩:用户体验探索,没有尽头>,这篇文章描述了罗永浩对锤子手机设计细节的 ...

  7. 【bzoj3387-跨栏训练】线段树+dp

    我们可以想到一个dp方程:f[i][0]表示当前在i个栅栏的左端点,f[i][1]表示在右端点. 分两种情况: 第一种:假设现在要更新线段gh的左端点g,而它下来的路径被ef挡住了,那么必定是有ef来 ...

  8. Bzoj2832 / Bzoj3874 宅男小C

    Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 124  Solved: 26 Description 众所周知,小C是个宅男,所以他的每天的食物要靠外 ...

  9. input placeholder 兼容问题

    placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9  我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...

  10. Linux 入门记录：七、fdisk 分区工具

    一.fdisk分区工具 fdisk 是来自 IBM 的老牌分区工具,支持绝大多数操作系统,几乎所有的 Linux 发行版都装有 fdisk,包括在 Linux 的 resuce 模式下依然能够使用. ...