公告栏添加时钟——利用canvas画出一个时钟

前言

最近在学习HTML5标签，学到Canvas,觉得很有趣。便在慕课网找了个demo练手。就是Canvas时钟。

对于canvas，w3shcool上是这么描述的：

　　　　HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。

　　　　不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

　　　　getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

示例

动态可看公告栏状态

正文

1.代码部分

html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Time</title>

<style type="text/css">

    #clockdiv{

        text-align: center;

    }

</style>

</head>

<body>

<div id="clockdiv">

    <canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>

<script type="text/javascript" src="Clock.js"></script>

</body>

</html>

js代码

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

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

var height = context.canvas.height;

var width = context.canvas.width;

var r = width / 2;

var rem = width/200;

//时钟背景

function drawBackground() {

    context.save();

    context.translate(r, r);

    context.beginPath();

    context.lineWidth = 8*rem;

    context.strokeStyle = "#000"

    context.arc(0, 0, r - 5*rem, 0, 2 * Math.PI, false);

    context.stroke();

    context.closePath();

//遍历小时数

    var houseNumble = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];

    houseNumble.forEach(function (number, i) {

        context.textAlign = 'center';

        context.textBaseline = 'middle'

        context.font = 18*rem+'px Arial'

        var rad = 2 * Math.PI / 12 * i;

        var x = Math.cos(rad) * (r - 30*rem);

        var y = Math.sin(rad) * (r - 30*rem);

        context.fillText(number, x, y);

    })

//定义刻度

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

        var rad = 2 * Math.PI / 60 * i;

        var x = Math.cos(rad) * (r - 18*rem);

        var y = Math.sin(rad) * (r - 18*rem);

        context.beginPath();

        if (i % 5 == 0) {

            context.fillStyle = "#000"

            context.arc(x, y, 2*rem, 0, 2 * Math.PI);

        } else {

            context.fillStyle = "#ccc"

            context.arc(x, y, 2*rem, 0, 2 * Math.PI);

        }

        context.fill();

        context.closePath();

    }

}

//定义时针

function drawHour(hour,minute) {

    context.save();

    context.beginPath();

    context.lineWidth = 6*rem;

    context.lineCap = 'round'

    var rad = 2 * Math.PI / 12 * hour;

    var mrad = 2* Math.PI/12/60 * minute;

    context.rotate(rad+mrad);

    context.moveTo(0, 10*rem);

    context.lineTo(0, -r / 2);

    context.stroke();

    context.restore();

}

//定义分针

function drawMinute(minute) {

    context.save();

    context.beginPath();

    context.lineWidth = 3*rem;

    context.lineCap = 'round';

    var rad = 2 * Math.PI / 60 * minute;

    context.rotate(rad);

    context.moveTo(0, 15*rem);

    context.lineTo(0, -r + 34)

    context.stroke();

    context.restore();

}

//定义秒钟

function drawSecond(second) {

    context.save();

    context.beginPath();

    context.lineWidth = 2*rem;

    context.lineCap = 'round';

    context.fillStyle = "red"

    var rad = 2 * Math.PI / 60 * second;

    context.rotate(rad);

    context.moveTo(-2 ,20);

    context.lineTo( 2, 20);

    context.lineTo( 1, -r + 18);

    context.lineTo( -1, -r + 18);

    context.fill();

    context.restore();

}

//画中心点

function drawDot() {

    context.beginPath();

    context.fillStyle = "#fff"

    context.arc(0, 0, 4*rem, 0, 2 * Math.PI, false);

    context.fill();

}

//时间函数，让时钟根据当前时间跳动

function Draw() {

    context.clearRect(0,0,width,height);

    var time= new Date();

    var hour =time.getHours();

    var minute = time.getMinutes();

    var second = time.getSeconds();

    drawBackground();

    drawHour(hour,minute);

    drawMinute(minute);

    drawSecond(second);

    drawDot();

    context.restore()

}

Draw();

//刷新时钟

setInterval(Draw,1000);

注意事项：1.有可能浏览器不现实效果，原因一：浏览器不兼容，会显示您的浏览器不兼容canvas。原因二：代码出错。

2.<canvas>标签最好不要使用CSS来定义长度大小。

　　　　　3.js中函数顺序不能乱，否则会被清除而没有效果。

　　　　　4.代码里高度宽度均为具体px值，画布大小会影响时钟美观（解决方案：设置一个比例变量，其值为 rem=width/200 ,将高度宽度用变量值 rem 来代替）。

2.给博客园公告栏添加时钟样式

1.公告栏先需要申请JS权限。（点击管理—设置—申请JS权限）

　　2.将自己的JS文件上传到博客的文件（点击管理—文件）里，得到地址，以下是我文件里的地址。（大家可以直接使用）

　　　http://files.cnblogs.com/files/abao0/Clock.js

　　3.将下面代码贴入博客侧边栏公告。

<div id="clockdiv">

    <canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>

</div>

<script type="text/javascript" src="Clock.js"></script>

　　4.将下面代码贴入页面定制CSS代码。（加个DIV是为了使时钟在不同博客样式中的公告栏中居中显示）

 #clockdiv {

            text-align: center;

        }

　　5.自定义你的样式，显示不同风格。

后记

动手做完一个demo会让自己更有收获，赶紧动起手来吧。