话不多说，直接上代码

<!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. HDU1078记忆化搜索

    FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  2. HDU1024 最大m子段和

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. HBase客户端访问超时的多个因素及参数

    在一个需要低延时响应的hbase集群中,使用hbase默认的客户端超时配置简直就是灾难. 但是我们可以考虑在客户端上加上如下几个参数,去改变这种状况: 1. hbase.rpc.timeout: RP ...

  4. java获去json所有对象

    public static void main(String args[]){ JSONObject json1=JSONObject.fromObject("{'username' : ' ...

  5. 不使用Tomcat，手写简单的web服务

    背景: 公司使用的YDB提供了http的查询数据库服务,直接通过url传入sql语句查询数据-_-||.ydb的使用参照:https://www.cnblogs.com/hd-zg/p/7115112 ...

  6. RabbitMQ与Spring集成

    RabbitMQ服务端安装: https://blog.csdn.net/hzw19920329/article/details/53156015 与Spring集成 https://www.cnbl ...

  7. spring 那点事

    Spring核心功能 DI(IOC) 何谓DI(IOC) DI(依赖注入)是spring的核心功能之一. Dependency Injection 和 Inversion of Control 其实就 ...

  8. Berland National Library

    题目链接:http://codeforces.com/problemset/problem/567/B 题目描述: Berland National Library has recently been ...

  9. python初步学习-python数据类型-集合（set）

    集合 在已经学过的数据类型中: 能够索引的,如list/str,其中的元素可以重复 可变的,如list/dict,即其中的元素/键值对可以原地修改 不可变的,如str/int,即不能进行原地修改 无索 ...

  10. C#利用WebClient 两种方式下载文件

    WebClient client = new WebClient(); 第一种 string URLAddress = @"http://files.cnblogs.com/x4646/tr ...