公告欄添加時鐘——利用canvas畫出一個時鐘

時間 2019-11-14

標籤告欄添加時鐘利用 canvas 畫出一個简体版

原文原文鏈接

前言

最近在學習HTML5標籤，學到Canvas,以爲頗有趣。便在慕課網找了個demo練手。就是Canvas時鐘。javascript

對於canvas，w3shcool上是這麼描述的：css

　　　　HTML5 <canvas> 標籤用於繪製圖像（經過腳本，一般是 JavaScript）。html

　　　　不過，<canvas> 元素自己並無繪製能力（它僅僅是圖形的容器） - 您必須使用腳原本完成實際的繪圖任務。java

　　　　getContext() 方法可返回一個對象，該對象提供了用於在畫布上繪圖的方法和屬性。canvas

示例

動態可看公告欄狀態瀏覽器

正文

1.代碼部分

html代碼dom

<!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來定義長度大小。spa

　　　　　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會讓本身更有收穫，趕忙動起手來吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。