canvas制作簡單鐘表
編輯：HTML5教程
之前用html+css+JavaScript實現了一個簡單鐘表，但還是有一些問題，主要是一些css屬性不同浏覽器支持效果不一樣，所以嘗試用 canvas實現了一個簡單的鐘表，效果在下方，當然了，采用canvas同樣會有一些浏覽器不支持。。。 這裡只討論canvas的實現方式。^_^
html部分
html部分很簡單，寫入canvas標簽，其id設置為“canvas”，用css設置成居中顯示，代碼如下：
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
canvas{display:block;margin:5px auto;}
</style>
<title>clock</title>
</head>
<body>
<canvas id='canvas'>您的浏覽器不支持canvas標簽</canvas>
<script type='text/javascript' src="外部JavaScript文件路徑"></script>
</body>
</html>
備注：需要通過script標簽的src屬性引入外部JavaScript文件
JavaScript部分
可以通過js獲取Canvas對象，設置畫布的寬高，不過繪圖工作是通過操作CanvasRenderingContext2D對象來操作的，獲取此對象的方法：
var canvas = document.getElementById('canvas'); // Canvas對象
canvas.width = 450; // 寬
canvas.height = 450; // 高
var context = canvas.getContext('2d'); // 獲取繪圖上下文環境
獲取到繪圖上下文context以後即可繪制鐘表了，整體思路是這樣的：定義一個全局變量記錄當前系統時間信息，用setInterval方法重復執行，獲取時間信息，並繪制圖像，代碼如下：
var currentDateObj; // 記錄當前時間信息
setInterval(function(){
update(); // 修改currentDateObj的內容
draw(); // 根據currentDateObj的內容繪制圖像
}, 500);
本文實現重點在於繪制圖像，關於update方法的實現，可以直接查看後邊的整體js代碼，draw方法中，主要涉及到的一些內容有：線段和圓的繪制、canvas文字渲染、canvas陰影實現、canvas圖形變換等內容
canvas繪制線段、圓
繪制線段很簡單，只需調用moveTo、lineTo方法設置線段路徑，調用stroke方法完成繪制
context.moveTo(20, 70); context.lineTo(140, 70); context.lineTo(140, 40); context.lineTo(180, 80); context.lineTo(140, 120); context.lineTo(140, 90); context.lineTo(20, 90); context.lineWidth = 2; // 設置線段寬度 context.strokeStyle = "#058"; // 設置顏色 context.stroke(); // 繪制到畫布上
運行結果：
繪制圓需要調用arc方法，然後調用stroke完成繪制，arc有5個參數，分別表示圓弧圓心的x坐標、y坐標、圓弧半徑、起始角、結束角，最後一個參數是一個布爾值，false表示順時針，true表示逆時針，下面是一些示例
for(var i = 0; i < 2; i++) {
for(var j = 0; j < 4; j++){
var b = (i == 0) ? false : true;
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = '#058';
context.arc(150 * j + 75, 150 * i + 75, 45, 0, (j + 1) * Math.PI / 2, b);
context.stroke();
}
}
運行結果：
通過moveTo、lineTo或者arc方法設置好圖形路徑以後，調用stroke方法完成圖形繪制，如果需要繪制一個區域，需要調用fill方法，如上例中，可以將stroke改成fill代碼如下：
for(var i = 0; i < 2; i++) {
for(var j = 0; j < 4; j++){
var b = (i == 0) ? false : true;
context.beginPath();
context.fillStyle = '#058';
context.arc(150 * j + 75, 150 * i + 75, 45, 0, (j + 1) * Math.PI / 2, b);
context.fill();
}
}
運行結果如下：
canvas文字渲染
在canvas畫布上寫段文字很簡單，基本分兩步：1.通過設置context的font屬性設置文本的樣式；2. 調用fillText或strokeText方法渲染文字
context.font = "bold 40px Arial";
context.fillStyle = '#058';
context.fillText("Canvas制作簡單鐘表", 50, 50);
context.strokeStyle = '#058';
context.strokeText("Canvas制作簡單鐘表", 50, 150);
運行結果如下：
可以設置textAlign和textBaseline屬性分別設置文本水平和垂直方向的對齊方式
canvas陰影效果
canvas設置陰影主要涉及到的屬性有：shadowColor設置陰影顏色，shadowOffsetX和shadowOffsetY分別設置陰影在x和y方向上的偏移量，shadowBlur設置陰影的模糊程度
context.shadowColor = "#444"; // 陰影顏色 context.shadowOffsetX = 10; // 陰影在x方向偏移量 負數為反方向 context.shadowOffsetY = 10; // 陰影在y方向偏移量 負數為反方向 context.shadowBlur = 10; // 陰影模糊程度 context.fillStyle = "#058"; context.fillRect(100, 50, 300, 100);
運行結果如下：
canvas圖形變換
canvas中最基本的圖形變換涉及到的方法是：位移 translate(x, y)，旋轉 rotate(deg)，縮放 scale(sx, sy),我們知道默認的坐標原點(0, 0)在canvas的左上角，但是對於我們的鐘表來說，如果能將坐標原點移動到表盤的圓心位置，處理起來將很方便，rotate將圖像旋轉制定的角度，旋 轉中心點即坐標原點，scale將圖像按制定的比例在x和y方向上進行縮放。需要注意的是，cavnas是基於狀態的，如果通過調用 translate(100, 100)方法，將坐標原點移動到(100, 100)的位置以後，如果再次調用，那麼坐標原點將在當前基礎上累加，所以在實際調用時，需要掉用save方法保存當前狀態，完成繪制以後調用 restore方法還原
本例中多次應用translate方法，設置表盤圓心為坐標原點，用rotate方法旋轉圖像，如刻度的繪制，只是繪制水平方向的一條線段，通過旋轉不同角度來達到效果
clearRect方法
clearRect方法用於清空一個矩形空間站的圖像，語法為：context.clearRect(x, y, width, height); 第一個參數x 表示要清除的矩形左上角的x坐標，第二個參數y 表示要清除的矩形左上角的y坐標，width參數表示要清除的矩形的寬度，height參數表示要清除的矩形的高度。
在本例中，draw方法的第一步就是調用此方法，清空整個canvas畫布的內容，然後才根據currentDateObj中的內容繪制圖像。
JavaScript部分的完整代碼
准備工作基本做完了，下面是本例中完整的JavaScript代碼：
(function(){
var config = {
canvas : {
width : 420, // 設置canvas的寬
height : 420, // 設置canvas的高
},
clock : {
radius : 200, // 設置表盤半徑
borderWidth : 10, // 表盤邊框寬度
origin : {
radius : 8, // 中心點 半徑
color : '#333' // 中心點 顏色
},
hand : {
hour : {width : 5, length : 80}, // 時針寬度和長度
minute : {width : 2, length : 110}, // 分針的寬度和長度
second : {length : 160} // 秒針長度
}
}
};
var canvas = document.getElementById('canvas');
canvas.width = config.canvas.width;
canvas.height = config.canvas.height;
var context = canvas.getContext('2d');
var currentDateObj; // 保存當前時間
setInterval(function(){
update();
draw();
}, 500);
function update(){
currentDateObj = getDateObj();
function getDateObj() {
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var day = d.getDay();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
month = (month < 9) ? '0' + month : '' + month;
date = (date < 9) ? '0' + date : '' + date;
hour = (hour < 9) ? '0' + hour : '' + hour;
minute = (minute < 9) ? '0' + minute : '' + minute;
second = (second < 9) ? '0' + second : '' + second;
var time = [hour, minute, second];
var str = year + '-' + month + '-' + date + ' ' + week[day];
return {
dateStr: str,
dateTime: time
}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBorder();
drawScale();
drawNumbers();
drawTime();
drawHand();
drawOrigin();
/**
* 繪制表盤邊框
*/
function drawBorder() {
context.save();
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, config.clock.radius, 0, 2 * Math.PI, false);
context.arc(canvas.width / 2, canvas.height / 2, config.clock.radius - config.clock.borderWidth, 0, 2 * Math.PI, true);
context.fillStyle = "#333";
context.shadowColor = "#444";
context.shadowBlur = 10;
context.closePath();
context.fill();
context.restore();
}
/**
* 繪制中心圓點
*/
function drawOrigin() {
context.save();
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, config.clock.origin.radius, 0, 2 * Math.PI, false);
context.fillStyle = config.clock.origin.color;
context.shadowColor = "#444";
context.shadowBlur = 3;
context.closePath();
context.fill();
context.restore();
}
/**
* 繪制表盤刻度
*/
function drawScale() {
for(var i = 0; i < 60; i++) {
var obj = {
sx : config.clock.radius - 15 - config.clock.borderWidth,
sy : 0,
ex : config.clock.radius - config.clock.borderWidth - 5,
ey : 0,
color : "#333",
width : 1
};
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(i * 6 * Math.PI / 180);
context.beginPath();
if(i % 5 == 0) {
obj.width = 3;
obj.color = "#000";
}
if(i % 15 == 0) {
obj.sx = config.clock.radius - 20 - config.clock.borderWidth;
}
context.moveTo(obj.sx, obj.sy);
context.lineTo(obj.ex, obj.ey);
context.strokeStyle = obj.color;
context.lineWidth = obj.width;
context.closePath();
context.stroke();
context.restore();
}
}
/**
* 獲取1-12數字
*/
function drawNumbers() {
var radius = config.clock.radius - config.clock.borderWidth - 40;
for(var i = 0; i < 12; i++) {
context.save();
context.beginPath();
context.translate(canvas.width / 2, canvas.height / 2);
context.font = "normal 28px Arial";
if((i + 1) % 3 == 0) {
context.font = "normal 36px Arial";
}
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText(i + 1, -radius * Math.cos((-i * 30 - 120) * Math.PI / 180), radius * Math.sin((-i * 30 - 120) * Math.PI / 180));
context.closePath();
context.restore();
}
}
/**
* 繪制下方的文字
*/
function drawTime() {
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
drawDateStr();
drawTimeBox();
drawTime();
context.restore();
/**
* 繪制 年月日星期信息
*/
function drawDateStr() {
context.beginPath();
context.font = "bold 14px Arial";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.shadowColor = '#ccc';
context.shadowBlur = 2;
context.closePath();
context.fillText(currentDateObj.dateStr, 0, 40);
}
/**
* 繪制顯示時分秒的背景盒子
*/
function drawTimeBox() {
context.beginPath();
context.fillStyle = "#555";
context.shadowColor = "#444";
context.shadowBlur = 3;
context.closePath();
context.fillRect(-47, 60, 30, 30);
context.fillRect(-15, 60, 30, 30);
context.fillRect(17, 60, 30, 30);
}
/**
* 繪制時分秒數字
*/
function drawTime() {
context.beginPath();
context.font = "normal 14px Arial";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = "#fff";
context.closePath();
context.fillText(currentDateObj.dateTime[0], -32, 75);
context.fillText(currentDateObj.dateTime[1], 0, 75);
context.fillText(currentDateObj.dateTime[2], 32, 75);
}
}
/**
* 繪制時分秒針
*/
function drawHand() {
var _hour = currentDateObj.dateTime[0] % 12;
var _minute = currentDateObj.dateTime[1];
var _second = currentDateObj.dateTime[2];
drawHourHand();
drawMinuteHand();
drawSecondHand();
// 時針
function drawHourHand() {
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(((_hour + _minute / 60) - 3) * 30 * Math.PI / 180);
context.beginPath();
context.moveTo(-12, 0);
context.lineTo(config.clock.hand.hour.length, 0);
context.lineWidth = config.clock.hand.hour.width;
context.strokeStyle = config.clock.origin.color;
context.lineCap = "round";
context.shadowColor = "#999";
context.shadowBlur = 5;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.stroke();
context.stroke();
context.closePath();
context.restore();
}
// 分針
function drawMinuteHand() {
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate((_minute - 15) * 6 * Math.PI / 180);
context.beginPath();
context.moveTo(-18, 0);
context.lineTo(config.clock.hand.minute.length, 0);
context.lineWidth = config.clock.hand.minute.width;
context.strokeStyle = config.clock.origin.color;
context.lineCap = "round";
context.shadowColor = "#999";
context.shadowBlur = 5;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.stroke();
context.closePath();
context.restore();
}
// 秒針
function drawSecondHand() {
context.save();
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate((_second - 15) * 6 * Math.PI / 180);
context.beginPath();
context.moveTo(-35, 1.5);
context.lineTo(0, 1.5);
context.lineTo(config.clock.hand.second.length, 0.5);
context.lineTo(config.clock.hand.second.length, -0.5);
context.lineTo(0, -1.5);
context.lineTo(-35, -1.5);
context.closePath();
context.fillStyle = "#f60";
context.shadowColor = "#999";
context.shadowBlur = 5;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.fill();
context.restore();
}
}
}
}());
小編推薦
熱門推薦