第一次在博客园注册发博。有一次去人家单位开标，看到开标网站上有个钟表动画，一时兴起，就写了个简单的钟表动画。

用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)的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  3. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  4. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  5. 高性能动画！HTML5 Canvas JavaScript框架KineticJS

    高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...

  6. php+js实现一个简单的用户管理系统

    php + js 实现一个简单的用户管理系统 说实话,我对PHP是抵触的,但是我们的WEB课程刚好学的就是这个,不得已看了看,下面是用PHP实现的一个简单的用户管理系统. 我们首先来看一下目录结构 a ...

  7. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  8. Three.js构造一个简单的房间

    主要研究three.js在3D场景中基本使用:画一个简单的房子.房子上画门和玻璃.房间内放一个床.定义鼠标事件可以移动场景.动画的使用等. 1.Three.js画的一个简单的房子,模拟地板以及四堵墙 ...

  9. 学习用node.js建立一个简单的web服务器

    一.建立简单的Web服务器涉及到Node.js的一些基本知识点: 1.请求模块 在Node.js中,系统提供了许多有用的模块(当然你也可以用JavaScript编写自己的模块,以后的章节我们将详细讲解 ...

随机推荐

  1. cxgrid学习

    delphi cxgrid控件哪个属性是设置不能编辑? cxgrid控件cxgridDBTable的OptionsData可以选择操作 cxGrid1DBTableView1下选择cxGrid1DBT ...

  2. 生成验证码JSP【复用代码】

    该JSP可以生成验证码.以后用到的时候就方便了. <%@ page language="java" pageEncoding="UTF-8"%> & ...

  3. python实例编写(7)---测试报告与测试套件（多个py文件，1个py文件内多个用例）

    一.  一个.py文件批量执行测试用例(一个.py文件下多个用例执行) 如果直接使用:unittest.main(),则按字母顺序执行, 对于前后之间又依赖关系的用例,需要按特定的顺序执行,则使用 s ...

  4. JSTL常用标签

    JSTL标签常用:http://blog.csdn.net/imust_can/article/details/6965756

  5. jmeter测试HTTP请求

    HTTP超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.(详情参考看一下百科) HTTP发送请求有GE ...

  6. 《Java I/O 从0到1》 - 第Ⅱ滴血 “流”

    前言 <Java I/O 从0到1>系列上一章节,介绍了File 类,这一章节介绍的是IO的核心 输入输出.I/O类库常使用流这个抽象概念.代表任何有能力产出数据的数据源对象或者是有能力接 ...

  7. ng-options的使用

    参考:官方文档.zhx1991 select 无默认选择一项 <select name="" id="" class="form-control ...

  8. JDK8-废弃永久代（PermGen）迎来元空间（Metaspace）

    1.背景 2.为什么废弃永久代(PermGen) 3.深入理解元空间(Metaspace) 4.总结 ========正文分割线===== 一.背景 1.1 永久代(PermGen)在哪里? 根据,h ...

  9. 我的第一个python web开发框架（1）——前言

    由于之前经验不是很丰富,写的C#系统太过复杂,所以一直想重写,但学的越多越觉得自己懂的越少,越觉的底气不足.所以一直不敢动手,在内心深处对自己讲,要静下心来认真学习,继续沉淀沉淀.这两年多以来找各种机 ...

  10. 【模版】AC自动机（简单版）

    题目背景 这是一道简单的AC自动机模版题. 用于检测正确性以及算法常数. 为了防止卡OJ,在保证正确的基础上只有两组数据,请不要恶意提交. 题目描述 给定n个模式串和1个文本串,求有多少个模式串在文本 ...