js实现一个简单钟表动画(javascript+html5 canvas)
第一次在博客园注册发博。有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画。
用js和html5 canvas对象实现一个简单钟表程序
主要用到的就是h5的canvas对象
canvas对象本人也不是很熟,大致看了几个常用的方法,难免有不足之处,仅是练习所用。
实现思路:画表盘,画刻度,画表针就是这么个思路。
主要就涉及到以下几个方法
arc 创建弧/曲线(用于创建圆形或部分圆)
rotate 旋转
lineTo画线
<!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>Js实现一个简单的钟表动画</title>
<style type="text/css">
canvas{ margin-left:500px;
margin-top:100px; } </style>
</head> <body>
<canvas id="canvas" width="600" height="600"></canvas>
<script language="javascript">
/*
作者:胖兔
时间:2017.8.9
描述:用js和html5 canvas对象实现一个简单钟表程序
*/ var Canvas = { //属性
Context:document.getElementById("canvas").getContext('2d'), //擦除
Clear:function(){ var cxt = Canvas.Context;
var width = cxt.canvas.width;
var height = cxt.canvas.height;;
this.Context.clearRect(0,0, width, height);
},
//radius钟表半径,sencondScaleWidth刻度长度,secondHandWidth秒针长度
CreateClock:function(radius,sencondScaleWidth,secondHandWidth){
var me = this;
var radius = radius;
var sencondScaleWidth = sencondScaleWidth;
var secondHandWidth = secondHandWidth;
//小时刻度
var hourScaleWidth = sencondScaleWidth*2;
//时针分针长度
var hourHandWidth = secondHandWidth*80/100;
//分针长度
var minuteHandWidth = secondHandWidth*90/100;
//确定圆心坐标
var point = {x:this.Context.canvas.width/2,y:this.Context.canvas.height/2};
var ctx = this.Context;//获取上下文
//绘制圆圈 function drawCircle(){ ctx.save();//记录画笔状态
//确定画笔的位置在圆心点
ctx.translate(point.x,point.y);
//ctx.fillStyle = "black";
ctx.strokeStyle="gray";
ctx.lineWidth = 2;
ctx.beginPath();//开始绘制路径
ctx.arc(0,0,radius,0,Math.PI*2);
ctx.closePath();//关闭路径
ctx.stroke();//绘制
ctx.restore();//复位 }
//绘制刻度
function drawScale(){
ctx.save();//记录画笔状态
var perHourRadian = Math.PI/6;
var perMinuteRadian = Math.PI/30;
//确定画笔的位置在圆心点
ctx.translate(point.x,point.y);
ctx.strokeStyle="gray"; //此处为了省事,只在表盘上简单的写了几个时间数字
ctx.font = "bold 30px impack"
var dc = radius-hourScaleWidth-30;
ctx.fillText("3", dc, 10);
ctx.fillText("6", -10,dc );
ctx.fillText("9", -dc, 10);
ctx.fillText("12", -15, -dc);
ctx.stroke(); for(var i=0;i<12;i++){
//坐标旋转
ctx.rotate(perHourRadian);
ctx.moveTo(radius-hourScaleWidth,0);
ctx.lineTo(radius,0);
} for(var i=0;i<60;i++){
//坐标旋转
ctx.rotate(perMinuteRadian);
ctx.moveTo(radius-sencondScaleWidth,0);
ctx.lineTo(radius,0);
} ctx.stroke();//绘制
ctx.restore(); //radian
}
//drawScale();
function drawHand(){ var myDate = new Date();
var curHour = myDate.getHours();
var curMinute = myDate.getMinutes();
var curSecond = myDate.getSeconds(); //绘制时针
curHour = curHour>12?curHour-12:curHour;
var hourRadian = (curHour+curMinute/60+curSecond/3600) * (Math.PI/6);
//绘制分针
var minuteRadian = (curMinute+curSecond/60) * (Math.PI/30);
//绘制秒针
var secondRadian = curSecond * (Math.PI/30); function run(radian,width,color){
ctx.save();
ctx.translate(point.x,point.y);
ctx.rotate(-Math.PI/2);
ctx.strokeStyle=color
ctx.beginPath();
ctx.rotate(radian);
ctx.moveTo(0,0);
ctx.lineTo(width,0);
ctx.closePath();
ctx.stroke();
ctx.restore();
}
run(hourRadian,hourHandWidth,"black");
run(minuteRadian,minuteHandWidth,"green");
run(secondRadian,secondHandWidth,"red"); }
//drawHand();
function drawAll(){
me.Clear();
drawCircle();
drawScale();
drawHand();
}
setInterval(drawAll,1000); } }; Canvas.CreateClock(290,20,200); </script>
</body>
</html>
js实现一个简单钟表动画(javascript+html5 canvas)的更多相关文章
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- JS实现一个简单的计算器
使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 高性能动画!HTML5 Canvas JavaScript框架KineticJS
高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...
- php+js实现一个简单的用户管理系统
php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...
- JavaScript+html5 canvas实现本地截图教程
这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...
- Three.js构造一个简单的房间
主要研究three.js在3D场景中基本使用:画一个简单的房子.房子上画门和玻璃.房间内放一个床.定义鼠标事件可以移动场景.动画的使用等. 1.Three.js画的一个简单的房子,模拟地板以及四堵墙 ...
- 学习用node.js建立一个简单的web服务器
一.建立简单的Web服务器涉及到Node.js的一些基本知识点: 1.请求模块 在Node.js中,系统提供了许多有用的模块(当然你也可以用JavaScript编写自己的模块,以后的章节我们将详细讲解 ...
随机推荐
- python 中的%s是什么意思呢?
今天忽然想写Python中的%s的意思,它怎么理解呢,我查阅了一下相关文献,然后结合了自己的理解,分析如下: 这是一个字符串格式化语法(这是从c 中调用的) 具体请参阅 http://www. ...
- 我的Spring学习记录(一)
spring是一个框架,一个我理解为对象的大熔炉,它生产着各种bean,还可以对生产的对象进行加工. 这里有些概念需要理解一下,就是IOC和DI以及AOP,接下来,我们进入主题. spring简介 上 ...
- 浅谈Linux虚拟内存
我的orangepi内存很少,所以我打算给它弄个虚拟内存 首先建立一个1G的空文件: dd if=/dev/zero of=/home/swapfile bs=64M count=16 格式化为swa ...
- bind9的一些配置
/etc/bind/named.conf.options:options { listen-on port 53 { any; }; // 监听在主机的53端口上.any代表监听所有的主机 direc ...
- 框架应用:Spring framework (三) - JDBC支持
Spring框架是一个一站式的框架,也就是对很多技术和框架做了封装,使其应用更加简便. JDBC的代码过程 /STEP 1. Import required packages import java. ...
- day09<面向对象+>
面向对象(多态的概述及其代码体现) 面向对象(多态中的成员访问特点之成员变量) 面向对象(多态中的成员访问特点之成员方法) 面向对象(多态中的成员访问特点之静态成员方法) 面向对象(超人的故事) 面向 ...
- hdu1698线段树的区间更新区间查询
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tota ...
- ZOJ 2042 Divisibility (DP)
Divisibility Time Limit: 2 Seconds Memory Limit:65536 KB Consider an arbitrary sequence of inte ...
- zoj3321 circle floyd 最小生成树
Circle 断一个图是否是一个环. 思路:必有m==n,那么我们用n-1条边能够生成一棵树(即是所有点联通,则用floyd即可),然后看最后一条边的两个点是否是单边(度为一)即可 . #includ ...
- checkValidity-表达验证方法。
调用该方法,可以显示对表单元素进行有效验证,返回值是boolean. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...