<!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. js 数组API之every、some用法

    every 判断数组中是否每个元素都满足条件 只有都满足条件才返回true: 只要有一个不满足就返回false: arr.every(function(value,index,array){retur ...

  2. css实现切角效果

    1. 一个切角 思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...

  3. mysql目录迁移 更改mysql的存储目录

    元旦节刚过完回来,忙了一天,现在的时间剩余不是很充足,所以更新简短的文章一篇! 正文: 正常情况下mysql的存储目录都是在/var/lib/mysql/下的,那么怎么将存储位置改到/data_mys ...

  4. appium-chromedriver@3.0.1 npm ERR! code ELIFECYCLE npm ERR! errno 1

    解决方法: npm install appium-chromedriver@3.0.1 --ignore-scripts 或者(安装方法): npm install appium-chromedriv ...

  5. Windows程序设计学习笔记（四）自绘控件与贴图的实现

    Windows系统提供大量的控件供我们使用,但是系统提供的控件样式都是统一的,不管什么东西看久了自然会厌烦,为了使界面更加美观,添加一些新的东西我们需要自己绘制控件. 控件在默认情况下并不进行自绘,如 ...

  6. Node Express 初探

    一如既往,先上一张图 Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. 关于Express更多相关知识请链接至官网http://www.expressjs.com.c ...

  7. mysqlfront提示过期解决方式

    帮助菜单(help)->登记(registration) 粘贴就好了 gNBpPFgyOw9Rwt/ozsnjgM7tJNo2 bhaaAThangemMkaz2tQhq3/f7dZ7Vj29W ...

  8. JMeter基本元素简介

    JMeter基本元素简介 一.测试计划 测试计划对象有一个复选框叫做"Functional Testing"(函数测试模式),如果选中,它将使jmeter记录服务端返回的每一个样例 ...

  9. “玲珑杯”ACM比赛 Round #13 题解&源码

    A 题目链接:http://www.ifrog.cc/acm/problem/1111 分析:容易发现本题就是排序不等式, 将A数组与B数组分别排序之后, 答案即N∑i=1Ai×Bi 此题有坑,反正据 ...

  10. [bzoj4098] [Usaco2015 Open]Palindromic Paths

    DP.. f[i][j][k]表示左上结束节点是第i条副对角线上的第j个点,右下结束节点是第n*2-i条副对角线上的第k个点,构成回文的方案数. i那维滚动一下.时间复杂度O(n^3)空间复杂度O(n ...