<!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. CSS3 radial-gradient 径向渐变属性 实现重复半圆角内边框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAADiCAIAAAAd73mYAAAG+ElEQVR4nO3dQQrkNhCG0TntHGGu4U ...

  2. Java学习笔记14（面向对象七：final、static）

    final:意为最终,不可变,是一个修饰词 有时候一个类地功能被开发好了,不想让子类重写,修改,这里就会用到final关键字 final修饰类: 不可以被继承,但是可以继承其他类 示例: public ...

  3. iOS中 学会如何对sqlite3 进行封装 (纯手工)

    #waring ---(看官注意) ---使用说明: ①在创建自定义model类之前让该类继承自文件中的Model类, ②为model类选一个NSString属性作为主键:(既,在初始化方法里面将从父 ...

  4. CentOS环境下tomcat启动超级慢的解决方案

    在本地开发环境,应用正常启动. 在CentOS测试环境,应用启动速度也是正常的. 但是在阿里云的生产环境,tomcat启动超级慢,并且在最终打印出来以下内容: org.apache.catalina. ...

  5. MYSQL:alter语句中change和modify的区别

    您可以使用CHANGE old_col_namecolumn_definition子句对列进行重命名.重命名时,需给定旧的和新的列名称和列当前的类型.例如:要把一个INTEGER列的名称从a变更到b, ...

  6. Codeforces #451 Div2 F

    #451 Div2 F 题意 给出一个由数字组成的字符串,要求添加一个加号和等号,满足数字无前导 0 且等式成立. 分析 对于这种只有数字的字符串,可以快速计算某一区间的字符串变成数字后并取模的值,首 ...

  7. java_web学习(八) jdbc连接mysql

    首先我们来看一下主机与数据库的关系图 实际上是两台服务器 一:下载数据库驱动jar包存放WebContent—WEB-INF—lib目录下 1.2步骤 1. 2. 3 4. 1.3 将jar包导入到W ...

  8. 原生ajax jq跨域

    原生js封装ajax //创建XmlhttpRequest对象 function createXHR(){     var xhr=null;     if(XMLHttpRequest){      ...

  9. 一种数据与逻辑分离的Python单元测试工具

    一种数据与逻辑分离的Python单元测试工具 几个概念 TestCase TestCase是一个完整的测试单元,最小的测试执行实体,就是我们常说的测试用例. TestSuite 以某种特性将测试用例组 ...

  10. mac上安装mongodb数据库教程

    1.官网下载压缩包,并解压到当地任一目录.(我的是Documents/develop/mongodb) 2.在mongodb下新建data文件夹,在data下新建db文件夹.(bin和data文件夹在 ...