<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8" />

        <title>时钟</title>

        <style type="text/css">

            div {

                text-align: center;

                margin-top: 200px;

            }

            /*#clock{border:1px solid #ccc}*/

        </style>

    </head>

    <body>

        <div>

            <canvas id="clock" width="500px" height="500px"></canvas>

        </div>

        <script type="text/javascript" src="js/clockEffect.js"></script>

    </body>

</html>
var clock = document.getElementById('clock');

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

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width / 2;

var rem = width / 300; //比例

function draw() {

    ctx.save(); //1、保存当前环境的状态

    ctx.translate(r, r); //改变画布圆点位置到（r,r）（默认左上角是（0，0））

    ctx.beginPath();

    ctx.lineWidth = 10 * rem;

    ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false); //false默认顺时针，可以不写

    ctx.stroke();

    //小时数

    var arr = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

    ctx.font = 30 * rem + 'px Arial';

    ctx.textAlign = 'center';

    ctx.textBaseline = 'middle';

    arr.forEach(function(num, i) {

        var rad = 2 * Math.PI / 12 * i; //弧度

        var x = Math.cos(rad) * (r - 35 * rem); //坐标

        var y = Math.sin(rad) * (r - 35 * rem);

        ctx.fillText(num, x, y);

    })

    //秒针的60个点

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

        var rad = 2 * Math.PI / 60 * i; //弧度

        var x = Math.cos(rad) * (r - 15 * rem); //坐标

        var y = Math.sin(rad) * (r - 15 * rem);

        ctx.beginPath();

        if(i % 5 === 0) {

            ctx.fillStyle = '#000';

            ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI);

        } else {

            ctx.fillStyle = '#ccc';

            ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI);

        }

        ctx.fill();

    }

}

//时针

function drawHour(hour, minute) {

    ctx.save();

    ctx.beginPath();

    var rad = 2 * Math.PI / 12 * hour;

    var mrad = 2 * Math.PI / 12 / 60 * minute;

    ctx.rotate(rad + mrad);

    ctx.lineWidth = 6 * rem;

    ctx.lineCap = 'round';

    ctx.moveTo(0, 10 * rem);

    ctx.lineTo(0, -r + 80 * rem);

    ctx.stroke();

    ctx.restore();

}

//分针

function drawMinute(minute) {

    ctx.save();

    ctx.beginPath();

    var rad = 2 * Math.PI / 60 * minute;

    ctx.rotate(rad);

    ctx.lineWidth = 4 * rem;

    ctx.lineCap = 'round';

    ctx.strokeStyle = 'yellow';

    ctx.moveTo(0, 10 * rem);

    ctx.lineTo(0, -r + 50 * rem);

    ctx.stroke();

    ctx.restore();

}

//秒针

function drawSecond(second) {

    ctx.save();

    ctx.beginPath();

    var rad = 2 * Math.PI / 60 * second;

    ctx.rotate(rad);

    ctx.fillStyle = 'red';

    ctx.moveTo(-2 * rem, 20 * rem);

    ctx.lineTo(2 * rem, 20 * rem);

    ctx.lineTo(1 * rem, -r + 20 * rem);

    ctx.lineTo(-1 * rem, -r + 20 * rem);

    ctx.fill();

    ctx.restore();

}

//中间圆点

function drawDot() {

    ctx.beginPath();

    ctx.fillStyle = '#fff';

    ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI);

    ctx.fill();

}

function drawClock() {

    var now = new Date(),

        hour = now.getHours(),

        minute = now.getMinutes(),

        second = now.getSeconds();

    ctx.clearRect(0, 0, width, height); //清除整个画布，重画

    draw();

    drawHour(hour, minute);

    drawMinute(minute);

    drawSecond(second);

    drawDot();

    ctx.restore(); //2、返回之前保存过的路径状态和属性（还原圆点）

}

setInterval(drawClock, 1000);

//绘制时钟用到的canvas属性和方法

//1、fillStyle：设置或返回用于填充绘画的颜色、渐变或模式

//2、lineCap：设置或返回线条的结束端点样式。（butt默认/round向线条的每个末端添加圆形线帽/square向线条的每个末端添加正方形线帽）

//3、lineWidth：设置或返回当前的线条宽度。示例：ctx.lineWidth=10

//4、fillRect()：绘制“被填充”的矩形。context.fillRect(x,y,width,height)

//5、clearRect()：在给定的矩形内清除指定的像素。context.clearRect(x,y,width,height)

//6、fill()：填充当前的图像（路径）

//7、stroke()：实际地绘制出通过moveTo()和lineTo()方法定义的路径

//8、beginPath()、closePath():开始和结束一条路径

//9、moveTo()、lineTo()：绘制“已填充”的矩形

//10、arc()：画圆。context.arc(x,y,r,sAngle,eAngle,counterclockwise)

//11、translate()：改变画布圆点位置

//12、rotate()：旋转绘图

//13、fillText()：在画布上绘制“被填充”的文本。context.fillText(text,x,y,maxWidth)

//14、font:字体属性

//      textAlign:水平对齐方式

//      textBaseline:垂直对齐方式

Javascript学习--时钟的更多相关文章

  1. 如何用iframe标签以及Javascript制作时钟？

    如何利用iframe标签以及Javascript制作时钟? 如何制作一个时钟呢?效果如下图所示: 这里的时钟会不停的走,但是下面的页面是不会变得,这样就实现了我们想要的效果了.下面我将分为以下几个方面 ...

  2. JavaScript 学习（3）核心对象

    ##JavaScript 学习 3 1.核心对象 1.1 String对象 声明和生成 var myString="Hello"; var myString=new String( ...

  3. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  4. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  5. JavaScript学习（3）：函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  6. JavaScript学习（2）：对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  7. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  8. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  9. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

随机推荐

  1. Java学习笔记14---this作为返回值时返回的是什么

    有时会遇到this作为返回值的情况,那么此时返回的到底是什么呢? 返回的是调用this所处方法的那个对象的引用,读起来有点绕口哈,有没有想起小学语文分析句子成份的试题,哈哈. 一点点分析的话,主干是& ...

  2. hadoop fs命令

  3. Oracle 存储过程以及存储函数

    以下的一些例子是基于scott用户下的emp表的数据,一和二使用的均为in,out参数,最后一个综合练习使用了 in out参数 一.存储过程 1.创建无参的存储过程示例  ------ hello ...

  4. 【dfs】POJ2386湖计数

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 34735   Accepted: 17246 D ...

  5. 不要错过iost币的免费派发机会

    2013 年 ripple 币曾经进行免费派发,而现在瑞波币兑CNY价格最高曾经达到20元, 如果你错过了 ripple 币,就不要错过这次李笑来和徐小平等背书 iost 币的免费派发

  6. Spring框架入门之基于xml文件配置bean详解

    关于Spring中基于xml文件配置bean的详细总结(spring 4.1.0) 一.Spring中的依赖注入方式介绍 依赖注入有三种方式 属性注入 构造方法注入 工厂方法注入(很少使用,不推荐,本 ...

  7. 异常笔记--java编程思想

    开一个新的系列,主要记一些琐碎的重要的知识点,把书读薄才是目的...特点: 代码少,概念多... 1. 基本概念 异常是在当前环境下无法获得必要的信息来解决这个问题,所以就需要从当前环境跳出,就是抛出 ...

  8. HUST 1588 辗转数对

    1588 - 辗转数对 时间限制:1秒 内存限制:128兆 155 次提交 27 次通过 题目描述 假设当前有一个数对(a, b),我们可以通过一步将这个数对变为一个新数对(a + b, b)或者是( ...

  9. dfs学习总结

    今天做到了dfs的训练,感觉和bfs有相似之处,接下来用一道题来总结一下方法,可类比bfs. 上题: Description There is a rectangular room, covered ...

  10. 学习Spring必学的Java基础知识(2)----动态代理

    Spring AOP使用动态代理技术在运行期织入增强的代码,为了揭示Spring AOP底层的工作机理,有必要对涉及到的Java知识进行学习.Spring AOP使用了两种代理机制:一种是基于JDK的 ...