公告栏添加时钟——利用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文件上传到博客的文件（点击管理—文件）里，得到地址，以下是我文件里的地址。（大家可以直接使用）

　　　https://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会让自己更有收获，赶紧动起手来吧。

posted @ 2017-03-29 09:21 博客园小马甲阅读(926) 评论(0) 编辑收藏举报

刷新页面返回顶部