DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5教程 >> canvas制作簡單鐘表
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();
             }
         }
     }
 }());
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved