<!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. 我的web聊天之---序章

    有时候自我感觉良好,人啊就开始膨胀,细细想来,自己还是那么苍白.---- 致傻傻的我 大家都知道,平时上班总是拿着手机看看微信,看看新闻,这个不太好,这不是重点,重点是我们公司web版本的微信,QQ都 ...

  2. k8s 重要概念 - 每天5分钟玩转 Docker 容器技术（117）

    在实践之前,必须先学习 Kubernetes 的几个重要概念,它们是组成 Kubernetes 集群的基石. Cluster Cluster 是计算.存储和网络资源的集合,Kubernetes 利用这 ...

  3. window64 PHP ffmpeg详解简单上手 音频amr转mp3

    从网上找了一大堆关于window 64 ffmpeg的信息,都是又长又不关键,让人难消化. 我只要简单的amr转MP3格式而已. 终于搞明白.自己总结了下! 希望能帮助到喜欢言简意赅,一眼上手的同学. ...

  4. c语言贪吃蛇详解5.GameOver功能与显示成绩

    c语言贪吃蛇详解5.GameOver功能与显示成绩 以前我们已经做出来了一个能吃东西变长的蛇.不过它好像不会死... 现在就来实现一下game over的功能吧. 写个函数判断蛇是否撞到自己或者撞到墙 ...

  5. Kotlin——从无到有系列教程（5）： 你该知道的Kotlin可空类型、空安全（null）、类型转换等特性

    在我们熟知的Java中,定义一个变量可以默认不赋值,因为Java的系统会给我们默认赋一个默认值,并且Java可定义一个赋值为null的变量,这样在使用这个变量的时候都会去显示判断该变量是否为null. ...

  6. chrome使用技巧整理

    查看chrome的相关快捷键:打开chrome,按下F1,点击"键盘和鼠标快捷键". 1.查看版本: 浏览器输入网址:chrome://version/ 2.查看Chrome进程清 ...

  7. dead loop、continue & break、while...else语句

    Dead loop 死循环,一经触发就会永远运行下去. continue & break 如果在循环过程中,因为某些原因,你不想继续循环了,就要用到break 或 continue语句. br ...

  8. js各种继承方式汇总

    js中的各种继承实现汇总 首先定义一个父类: function Animal(name) { this.name = name || '动物' this.sleep = function () { c ...

  9. python os 模块

    os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cdos.curdir ...

  10. 基于Windows下处理Java错误:编码GBK的不可映射字符的解决方案

    基于Windows下处理Java错误:编码GBK的不可映射字符的解决方案 最近在研究Java,涉及命令行编译,使用notepad++编辑器,然后使用javac编译: 之前的几个文件没有中文的内容,都没 ...