<!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. exports与module.exports，export与export default 之间的关系和区别

    首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念. CommonJS模块规范 Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个 ...

  2. KMP算法讲解

    老规矩,讲算法前,先说一道小问题吧 给你一个长串和短串,求短串在长串中出现的次数和位置. 设长串长度为len1,短串长度为len2. 如果len1*len2<=108,那就很简单了,直接暴力枚举 ...

  3. Maven 环境配置

    1. 解压maven 2. 配置MAVEN_HOME环境变量 MAVEN_HOME   D:\maven\apache-maven-3.0.5-bin\apache-maven-3.0.5 path  ...

  4. 机器学习 | 从加法模型讲到GBDT算法

    作者:JSong, 日期:2017.10.10 集成学习(ensemble learning)通过构建并结合多个学习器来完成学习任务,常可获得比单一学习器显著优越的泛化性能,这对"弱学习器& ...

  5. Python 浅析线程（threading模块）和进程（process）

    线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 进程与线程 什么 ...

  6. 微信小程序之自定义toast弹窗

    微信小程序里面的自带弹窗icon只有两种,success和loading.有时候用户输入错误的时候想加入一个提醒图标,也可以使用wx.showToast中的image来添加图片达到使用自定义图标的目的 ...

  7. PHP获取DHCP分配的本机IP

    在搭建本地环境的时候,需要用到多个设备,有服务器.打印机连接接设备等.因为DHCP动态分配IP,所以每次重连都会发生IP地址的变更. 解决办法就是将每个设备的本机IP上传到统一的地方保存.因为使用RE ...

  8. 聊一聊Javasript继承

      前前后后已经快写了2年左右javaScript,刚开始只是简单用于一些表单验证和操作dom节点,并没有深入的使用,随着渐渐的深入,开始不想去写重复的代码(懒的开始),从而写简单的继承,封装,抽象等 ...

  9. Gym 101673F Keeping On Track

    原题传送门 题意:给定一颗n+1(n≤10000)个结点的树(当然有n条边辣),定义一个结点为critical,当且仅当除去这个点及与其相连的边后,所有不相连的结点对数量最多.现在保证有且仅有一个结点 ...

  10. codeforces Gym 101063 C

    二进制转十进制 然后按位比较 传送门 http://codeforces.com/gym/101063 #include <cstdio> #include <cmath> # ...