话不多说，直接上代码

<!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. bzoj 2599 [IOI2011]Race 点分

    [IOI2011]Race Time Limit: 70 Sec  Memory Limit: 128 MBSubmit: 4768  Solved: 1393[Submit][Status][Dis ...

  2. CMDB服务器管理系统【s5day88】：兼容的实现

    比较麻烦的实现方式 类的继承方式 目录结构如下: auto_client\bin\run.py import sys import os import importlib import request ...

  3. 给定一个数字n，不用for循环实现输出数组 [1,2,3,4,...,n]

    一.for循环方式实现输出[1, 2, 3, ..., n] var n = 5; function test(n){ var arr=[]; for( var i = 1; i <= n; i ...

  4. UVA 11440 Help Tomisu

    https://vjudge.net/problem/UVA-11440 题意: 求2——n! 之间有多少个整数x,满足x的所有素因子都大于m 保证m<=n x的所有素因子都大于m 等价于 x和 ...

  5. [uva11174]村民排队 递推+组合数+线性求逆元

    n(n<=40000)个村民排成一列,每个人不能排在自己父亲的前面,有些人的父亲不一定在.问有多少种方案. 父子关系组成一个森林,加一个虚拟根rt,转化成一棵树. 假设f[i]表示以i为根的子树 ...

  6. iOS开发者两分钟学会用GitHub在Mac上托管代码的两种方法

        原文发布者:http://blog.csdn.net/duxinfeng2010 在Mac上使用Xcode进行iOS-Apple苹果iPhone手机开发过程中少不了使用GitHub在Mac上托 ...

  7. 关于SQL注入的五大报错注入函数

    ~全部都以查user()为例子~ 1.floor()id = 1 and (select 1 from  (select count(*),concat(version(),floor(rand(0) ...

  8. 你自认为理解了JavaScript？【转】

    第一题 if (!("a" in window)) { var a = 1; } alert(a); 第二题 var a = 1, b = function a(x) { x &a ...

  9. netcat、nc工具随记

    netcat又称nc工具,其最主要的作用就是建立连接并返回两个数据流,剩下的就看各位的想象力了,想象力是很重要的,这也是这个工具的强大之处的所在,所以重要的东西才要说三遍,想象力! 具体参数如下: - ...

  10. BP神经网络-- 基本模型

    转载:http://www.cnblogs.com/jzhlin/archive/2012/07/28/bp.html BP 神经网络中的 BP 为 Back  Propagation 的简写,最早它 ...