<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>标题</title>

<meta name="keywords" content="">

<meta name="description" content="">

<style>

	*{margin:0; padding:0; list-style:none;}

	.box{

		width: 420px;

		height: 420px;

		margin: 50px auto 0;

	}

	#cvs{

		background: #B1A6BE;

	}

</style>

</head>

<body>

	<div class="box">

		<canvas id="cvs" width="420" height="420"></canvas>

	</div>

<script>

var cvs=document.getElementById('cvs');

var ctx=cvs.getContext('2d');

clock();

setInterval(clock,1000);

function clock(){

	var img=document.createElement('img');

	img.src='01.jpg';

	//时钟背景图

	// img.onload=function (){

		ctx.beginPath();

		ctx.drawImage(img,0,0,420,420);

		ctx.closePath();

	// }

	//时钟外圆

	ctx.beginPath();

	ctx.arc(210,210,200,0,2*Math.PI,true);

	ctx.strokeStyle='#60D9F8';

	ctx.lineWidth=10;

	ctx.stroke();

	ctx.clip();

	ctx.closePath();

	//分刻度 360/60=6

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

		ctx.save();//保存状态

		ctx.beginPath();

		ctx.translate(210,210);

		ctx.rotate(i*6*Math.PI/180);

		ctx.strokeStyle='#FEF319';

		ctx.lineWidth=5;

		ctx.moveTo(0,-185);

		ctx.lineTo(0,-195);

		ctx.stroke();

		ctx.closePath();

		ctx.restore();//恢复之前保存的状态

	};

	//时刻度 360/12=30

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

		ctx.save();//保存状态

		ctx.beginPath();

		ctx.translate(210,210);

		ctx.rotate(i*30*Math.PI/180);

		ctx.strokeStyle='#60D9F8';

		ctx.lineWidth=8;

		ctx.moveTo(0,-175);

		ctx.lineTo(0,-195);

		ctx.stroke();

		ctx.closePath();

		ctx.restore();//恢复之前保存的状态

	};

	//获取当前时间

	var dates=new Date();

	var h=dates.getHours();

	var m=dates.getMinutes();

	var s=dates.getSeconds();

	h=h+m/60;//12.5小时

	m=m+s/60;

	//画时间

	var h2=dates.getHours();

	var m2=dates.getMinutes();

	var str1=h2>9?h2:'0'+h2;

	var str2=m2>9?m2:'0'+m2;

	var str=str1+':'+str2;// 09:05

	ctx.beginPath();

	ctx.font='26px 微软雅黑';

	ctx.fillStyle='#5BDA40';

	ctx.fillText(str,180,340);

	ctx.closePath();

	//时针

	ctx.save();//保存状态

	ctx.beginPath();

	ctx.translate(210,210);

	ctx.rotate(h*30*Math.PI/180);

	ctx.strokeStyle='#60D9F8';

	ctx.lineWidth=8;

	ctx.moveTo(0,14);

	ctx.lineTo(0,-130);

	ctx.stroke();

	ctx.closePath();

	ctx.restore();//恢复之前保存的状态

	//分针

	ctx.save();//保存状态

	ctx.beginPath();

	ctx.translate(210,210);

	ctx.rotate(m*6*Math.PI/180);

	ctx.strokeStyle='#FEF319';

	ctx.lineWidth=5;

	ctx.moveTo(0,14);

	ctx.lineTo(0,-150);

	ctx.stroke();

	ctx.closePath();

	ctx.restore();//恢复之前保存的状态

	//秒针

	ctx.save();//保存状态

	ctx.beginPath();

	ctx.translate(210,210);

	ctx.rotate(s*6*Math.PI/180);

	ctx.strokeStyle='#FB1F11';

	ctx.lineWidth=3;

	ctx.moveTo(0,14);

	ctx.lineTo(0,-170);

	ctx.stroke();

	ctx.closePath();

	//秒针上的圆

	ctx.beginPath();

	ctx.fillStyle='#FEF319';

	ctx.strokeStyle='#FB1F11';

	ctx.lineWidth=3;

	ctx.arc(0,-155,5,0,2*Math.PI,true);

	ctx.fill();

	ctx.stroke();

	ctx.closePath();

	//中心圆

	ctx.beginPath();

	ctx.fillStyle='#FEF319';

	ctx.strokeStyle='#FB1F11';

	ctx.lineWidth=3;

	ctx.arc(0,0,8,0,2*Math.PI,true);

	ctx.fill();

	ctx.stroke();

	ctx.closePath();

	ctx.restore();//恢复之前保存的状态

}

</script>

</body>

</html>

　　

Canvas画布实现自定义时钟效果的更多相关文章

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

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

  2. vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  3. canvas实现的时钟效果

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

  4. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  5. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  6. CANVAS画布与SVG的区别

    CANVAS是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属 ...

  7. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  8. transform实现的时钟效果

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

  9. 关于使用Css设置Canvas画布大小的问题

    问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...

随机推荐

  1. Kafka学习-入门

    在上一篇kafka简介的基础之上,本篇主要介绍如何快速的运行kafka. 在进行如下配置前,首先要启动Zookeeper. 配置单机kafka 1.进入kafka解压目录 2.启动kafka bin\ ...

  2. 1.Tsung介绍（翻译）

    1.介绍 1.1什么是Tsung? Tsung(以前是IDX-Tsunami)是一种分布式负载测试工具.它是基于协议的,并且通常被用于压测HTTP, WebDAV, SOAP, PostgreSQL, ...

  3. iOS开发之判断用户是否打开APP通知开关

    一.前言 在多数移动应用中任何时候都只能有一个应用程序处于活跃状态,如果其他应用此刻发生了一些用户感兴趣的那么通过通知机制就可以告诉用户此时发生的事情.iOS中通知机制又叫消息机制,其包括两类:一类是 ...

  4. React入门---开始前的准备(上)-2

    开始前准备: 1.安装配置nodeJs(nodeJS官网) 检查安装成功: node -v npm -v 2.使用NPM配置React开发环境 (1). 创建项目文件夹(创建文件夹时,文件夹名不要起为 ...

  5. Arduino UNO +ESP8266采集数据上传到贝壳网

    集成电路设计大赛赛程将至,我现在还是毫无头绪,然后又报了一个互联网+,比赛报了,东西就必须出来,时间很紧的情况下,所以选择了开源的arduino的进行完成.从开始接触Arduino到完成工程,前前后后 ...

  6. 学习spring前，先了解了解代理模式

    什么是代理模式 举个例子,我是一个包租公,我现在想卖房,但是我不想麻烦,每天被电话骚扰,所以这个时候我找了楼下一个中介,让他帮我代理这些事,那么他自然有租房的方法.以后如果有人想租房,直接找中介就行了 ...

  7. VR全景智慧城市

    随着虚拟现实产业的发展,我国对虚拟现实产业也越来越重视了.我国虚拟现实VR市场增长速度很快,市场活跃性很高,很多人都看好我国的虚拟现实VR市场,而且未来国内虚拟现实VR市场的销量还将有更大的增长.据赛 ...

  8. 关于JS的页面跳转

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  9. 开涛spring3(3.1) - DI的配置使用

    3.1.1  依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”,那先让我们复习一下类之间的关系: 泛化:表示类与类之间的继承关系.接口与接口之间的继承关系: 实现:表示类对接口的实现 ...

  10. linux JDK或JRE安装或配置

    1. 使用命令“java –version”如果显示如下内容则jdk已安装成功则无需后续操作. 2. 将解压后的文件“jdk-7u79-linux-x64.rpm ”上传到linux系统目录:/usr ...