canvas画的时钟

结合几天来学习的canvas的API，终于完成了一个时钟呵呵

html

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>canvas</title>

<style type="text/css">

canvas { border: 1px solid black; }

#change{width:200px; line-height:30px; color:#fff; text-align:center; background:blue;}

</style>

<script src="canvas.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<canvas id="canvas" width="600" height="400">current stock price: $3.15 +0.15</canvas>

</html>

window.onload = function() {

    new clock();

}

function clock() {

    var canvas = document.getElementById('canvas');

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

    ctx.clearRect(0, 0, 300, 300);

    var date = new Date(); //获取当前时间

    this.hour = date.getHours();

    this.min = date.getMinutes();

    this.sec = date.getSeconds();

    this.hour = this.hour + this.min / 60;

    this.hour = this.hour > 12 ? this.hour - 12 : this.hour;

    this.radius = 115;

    this.dotX = 150;

    this.dotY = 150;

    this.maxBorderWidth = 8;

    this.minBorderWidth = 2;

    this.clockBg();

    this.drawHour();

    this.drawMin();

    this.drawSec();

    this.onreset();

}

clock.prototype.onreset = function() {

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

    ctx.clearRect(0, 0, 300, 300);

    var date = new Date(); //获取当前时间

    this.hour = date.getHours();

    this.min = date.getMinutes();

    this.sec = date.getSeconds();

    this.hour = this.hour + this.min / 60;

    this.hour = this.hour > 12 ? this.hour - 12 : this.hour;

    this.clockBg();

    this.drawHour();

    this.drawMin();

    this.drawSec();

    var self = this;

    setInterval(function() {

        self.onreset();

    }, 1000);

}

clock.prototype.clockBg = function() {

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

    ctx.beginPath();

    ctx.fillStyle = "#e3e3e3";

    ctx.arc(this.dotX, this.dotY, this.radius, 0, 2 * Math.PI, false);

    ctx.fill();

    ctx.closePath();

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

        ctx.save();

        var pointLong;

        if (i % 5 == 0) {

            ctx.lineWidth = this.maxBorderWidth;

            pointLong = 25;

        } else {

            ctx.lineWidth = this.minBorderWidth;

            pointLong = 12;

        }

        ctx.strokeStyle = "#000";

        ctx.translate(this.dotX, this.dotY);

        ctx.rotate(i * 6 * Math.PI / 180);

        ctx.beginPath();

        ctx.moveTo(0, -this.radius + this.maxBorderWidth);

        ctx.lineTo(0, -this.radius + this.maxBorderWidth + pointLong);

        ctx.closePath();

        ctx.stroke();

        ctx.restore();

    };

}

clock.prototype.drawHour = function() {

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

    ctx.save();

    ctx.strokeStyle = "#000";

    ctx.lineWidth = this.maxBorderWidth;

    ctx.translate(this.dotX, this.dotY);

    ctx.rotate(this.hour * 30 * Math.PI / 180);

    ctx.beginPath();

    ctx.moveTo(0, 20);

    ctx.lineTo(0, -70);

    ctx.closePath();

    ctx.stroke();

    ctx.restore();

}

clock.prototype.drawMin = function () {

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

    ctx.save();

    ctx.strokeStyle = "#00";

    ctx.lineWidth = this.maxBorderWidth;

    ctx.translate(this.dotX, this.dotY);

    ctx.rotate(this.min*6*Math.PI/180);

    ctx.beginPath();

    ctx.moveTo(0, 20);

    ctx.lineTo(0, -80);

    ctx.closePath();

    ctx.stroke();

    ctx.restore();

}

clock.prototype.drawSec = function() {

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

    ctx.save();

    ctx.strokeStyle = "#f00";

    ctx.lineWidth = this.minBorderWidth;

    ctx.translate(this.dotX, this.dotY);

    ctx.rotate(this.sec * 6 * Math.PI / 180);

    ctx.beginPath();

    ctx.moveTo(0, 20);

    ctx.lineTo(0, -100);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.fillStyle = "#f00";

    ctx.arc(0, 0, 5, 0, 2 * Math.PI, true);

    ctx.closePath();

    ctx.fill();

    ctx.restore();

}

function drawTime() {

    var clock = document.getElementById('canvas');

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

    ctx.clearRect(0, 0, 244, 300);

    var date = new Date(); //获取当前时间

    var hour = date.getHours();

    var min = date.getMinutes();

    var sec = date.getSeconds();

    hour = hour + min / 60;

    hour = hour > 12 ? hour - 12 : hour;

    var width = 244;

    var height = 280;

    var dot = { //时钟中心

        x: width / 2,

        y: width / 2,

        radius: 4

    }

    var radius = 115;

    var maxBorderWidth = 8;

    var minBorderWidth = 2;

    //绘制时钟中心点

    ctx.lineWidth = maxBorderWidth;

    ctx.beginPath();

    ctx.fillStyle = "#e2e2e2";

    ctx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true);

    ctx.fill();

    ctx.closePath();

    //绘制时刻度、分刻度

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

        ctx.save();

        var pointLong;

        if (i % 5 == 0) {

            ctx.lineWidth = maxBorderWidth;

            pointLong = 25;

        } else {

            ctx.lineWidth = minBorderWidth;

            pointLong = 12;

        }

        ctx.strokeStyle = "#000";

        ctx.translate(dot.x, dot.y);

        ctx.rotate(i * 6 * Math.PI / 180);

        ctx.beginPath();

        ctx.moveTo(0, -radius + maxBorderWidth);

        ctx.lineTo(0, -radius + maxBorderWidth + pointLong);

        ctx.closePath();

        ctx.stroke();

        ctx.restore();

    }

    //绘制时针

    ctx.save();

    ctx.lineWidth = maxBorderWidth;

    ctx.translate(dot.x, dot.y);

    ctx.rotate(hour * 30 * Math.PI / 180);

    ctx.beginPath();

    ctx.moveTo(0, -55);

    ctx.lineTo(0, 25);

    ctx.closePath();

    ctx.stroke();

    ctx.restore();

    //绘制分针

    ctx.save();

    ctx.lineWidth = maxBorderWidth;

    ctx.translate(dot.x, dot.y);

    ctx.rotate(min * 6 * Math.PI / 180);

    ctx.beginPath();

    ctx.moveTo(0, -97);

    ctx.lineTo(0, 25);

    ctx.closePath();

    ctx.stroke();

    ctx.restore();

    //绘制秒针

    ctx.save();

    ctx.strokeStyle = "red";

    ctx.lineWidth = minBorderWidth;

    ctx.translate(dot.x, dot.y);

    ctx.rotate(sec * 6 * Math.PI / 180);

    ctx.beginPath();

    ctx.moveTo(0, -75);

    ctx.lineTo(0, 25);

    ctx.closePath();

    ctx.stroke();

    ctx.beginPath();

    ctx.fillStyle = '#D6231C';

    ctx.arc(0, -75, 6, 0, 2 * Math.PI, true); //绘制秒针针尖的小圆点

    ctx.fill();

    ctx.closePath();

    ctx.restore();

    //装饰时钟中心  两个小圆叠加

    ctx.beginPath();

    ctx.fillStyle = '#982127';

    ctx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true);

    ctx.fill();

    ctx.closePath();

    ctx.beginPath();

    ctx.fillStyle = '#D6231C';

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

    ctx.fill();

    ctx.closePath();

    //再时钟上添加签名

    ctx.fillStyle = "#000";

    ctx.font = "15px Comic Sans MS";

    ctx.fillText("Chal Mine", dot.x - 30, dot.y + 50);

}

canvas画的时钟的更多相关文章

深夜，用canvas画一个时钟
深夜,用canvas画一个时钟查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
先给个效果图,我画的比较丑,大家可以自己美化一下, 直接上代码: <!DOCTYPE html> <meta charset="utf-8"> <ht ...
HTML5 Canvas画数字时钟
先不说废话,没代码算个蛋. 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是时针,分针的逻辑都是一致的. 代码中有些坐标不知道为什么较不准,看看就好
canvas画一个时钟
效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
用canvas画一个时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
利用canvas画一个实时时钟
先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
H5 canvas圆形的时钟
今天用H5中的canvas标签做一个时钟,H5中有很多好用的新增标签,真的很不错. 1.canvas标签介绍 <canvas> 标签定义图形,比如图表和其他图像,你必须使用脚本来绘制图形. ...
canvas实例_时钟
效果图:是一个会动的时钟一.时钟的组成 1.表盘(蓝色) 2.刻度(黑色) 3.时针(黑色) 4.分针(黑色) 5.秒针(红色)需美化二.主要应用的技术 Canvas画线 Canv ...

随机推荐

【C++】：STL迭代器使用---[容器：：iterator iter;]
参考文章:http://blog.csdn.net/qq_23100787/article/details/51388163 迭代器这种东西,就是为了使访问简单!! 容器::iterator iter ...
线特征---LBD算法（三）
上一节主要是介绍LSD算法理论,这节主要是介绍LBD算法. 参考文章:An efficient and robust line segment matching approach based on L ...
完全卸载jdk
完全卸载jdk 如(卸载jdk1.7.0_80), 当卸载jdk时出现删除信息不全,导致无法安装,可通过此方法实现完全卸载. 1.打开系统运行输入regedit(注册表)分别查找以下路径 (1) ...
Bonding
一.简介双网卡配置设置虚拟为一个网卡实现网卡的冗余,其中一个网卡坏掉后网络通信仍可正常使用,实现网卡层面的负载均衡和高可用性二.原理网卡工作在混杂(promisc)模式,接收到达网卡的所有数 ...
Spring Boot 2.0(一）：Spring Boot 2.0尝鲜-动态 Banner
Spring Boot 2.0 提供了很多新特性,其中就有一个小彩蛋:动态 Banner,今天我们就先拿这个来尝尝鲜 Spring Boot 更换 Banner 我们先来回顾一下在 Spring Bo ...
使用开源的工具解析erspan流量
Decapsulation ERSPAN Traffic With Open Source Tools Posted on May 3, 2015 by Radovan BrezulaUpdated ...
svn冲突问题解决办法
经常有人会说,树冲突是很难解决的一类冲突,其实一旦了解了其原理,要解决也不难.先回顾下对于树冲突的定义. 树冲突:当一名开发人员移动.重命名.删除一个文件或文件夹,而另一名开发人员也对它们进行 ...
iOS设置图片名称、启动图片、防止TabBar图片和文字渲染
设置App的名称设置App的启动图片需要注意点是,App要杀掉重启才能显示出启动图片 2种方法防止图片被渲染 1. vc02.tabBarItem.image = [UIImage imageNa ...
干货分享，40个photoshop技能送给你！
自从有了“PS(Photoshop)”以后,很多事情变成了可能,你可以上九天揽月,也可以下五洋捉鳖,照片中,你可以出现在任何你想在的地方.而最基本的美化照片的功能,我想是很多同学学习PS的初衷.当你掌 ...
UI设计教程分享：6个不能错过的UI设计网站
Ui设计学习的人越来越多了,想要找到合适的学习资料很难,很多才接触ui设计且没有基础的同学也不知道去哪里找学习资料,虽然现在百度上很容易搜到ui设计的学习资料,但是一看不难发现,很多都是过时的学习资料 ...

canvas画的时钟

canvas画的时钟的更多相关文章

随机推荐

热门专题