溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
基本思路：
首先繪制一個矩形背景，設置顏色為灰色。在背景上繪制一個簡單的矩形外邊框，然后再繪
制一個內邊框，接著加載選定的圖像做為電子鐘內部的背景圖片。然后開始繪制時鐘刻度，
繪制分鐘刻度，最后獲取當前系統時間，繪制時分秒三個手柄。
技術要點：
使用HTML5的Canvas 2D繪制對象，主要使用context.save()與context.restore()方法來保存
繪制狀態和重置繪制狀態，使用Transform和fillRect()方法來繪制時鐘和分鐘刻度。使用
drawImage()方法來繪制背景圖片，使用setTimeout()方法來刷新時間顯示。
代碼詳解：
獲取HTML5 Canvas繪制對象的代碼如下:
var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500); 繪制時鐘刻度的代碼如下： var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(245, 245); for (var i=0; i <= 12; i++) { // top ctx.fillRect(160,-7.5,30,10); ctx.strokeRect(160,-7.5,30,10); ctx.transform(cos, sin, -sin, cos, 0, 0); }繪制分鐘分鐘刻度的代碼如下： var sin = Math.sin(Math.PI/30); var cos = Math.cos(Math.PI/30); for (var i=0; i <= 60; i++) { ctx.fillRect(170,-5,10,2); ctx.transform(cos, sin, -sin, cos, 0, 0); } 保存制狀態代碼如下：
ctx.translate(245, 245); ctx.save();恢復繪制狀態代碼如下：
ctx.restore();
運行效果如下：
<html> <head> <script> window.onload = function() { clockHand(); }; function clockHand() { var canvas = document.getElementById("canvas1"); ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, 500, 500); // create background rectangle // ctx.lineWidth = 10; ctx.fillStyle = "gray"; ctx.fillRect(0,0,500,500); // draw frame ctx.lineWidth = 10; ctx.strokeStyle = "green"; ctx.strokeRect(0,0,500,500); // draw author infomation ctx.fillStyle = "blue"; ctx.font = "20px Times New Roman"; ctx.fillText("-created by gloomyfish", 150, 30); // draw inner rectangle ctx.lineWidth = 10; ctx.strokeStyle = "black"; ctx.strokeRect(45,45,400,400); // create background image var img=new Image(); img.src="background.png"; img.onload = function() { ctx.drawImage(img,45,45,400,400); ctx.save(); // draw marker unit ctx.lineWidth = 2; ctx.fillStyle = "purple"; ctx.strokeStyle = "black"; var sin = Math.sin(Math.PI/6); var cos = Math.cos(Math.PI/6); ctx.translate(245, 245); for (var i=0; i <= 12; i++) { // top ctx.fillRect(160,-7.5,30,10); ctx.strokeRect(160,-7.5,30,10); ctx.transform(cos, sin, -sin, cos, 0, 0); } // transform back center point // ctx.translate(245, 245); var sin = Math.sin(Math.PI/30); var cos = Math.cos(Math.PI/30); for (var i=0; i <= 60; i++) { ctx.fillRect(170,-5,10,2); ctx.transform(cos, sin, -sin, cos, 0, 0); } ctx.restore(); // top ctx.fillText("12", 233,100); // bottom ctx.fillText("6", 240,400); // left ctx.fillText("9", 90,252); // right ctx.fillText("3", 395,250); // get time ctx.save(); ctx.translate(245, 245); ctx.save(); // dynamic show time var now=new Date(); var hrs=now.getHours(); var min=now.getMinutes(); var sec=now.getSeconds(); //Draw hour hand ctx.rotate(Math.PI/6*(hrs+(min/60)+(sec/3600))); ctx.beginPath(); ctx.moveTo(0,10); ctx.lineTo(0,-60); ctx.stroke(); ctx.restore(); ctx.save(); //Draw minute hand ctx.rotate(Math.PI/30*(min+(sec/60))); ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-110); ctx.stroke(); ctx.restore(); ctx.save(); //Draw second hand ctx.rotate(Math.PI/30*sec); ctx.strokeStyle="#E33"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0,20); ctx.lineTo(0,-110); ctx.stroke(); ctx.restore(); // finally store to originall point ctx.restore(); setTimeout(clockHand,1000); }; } </script> </head> <body bgcolor="#E6E6FA"> <canvas id="canvas1" width="500" height="500">electronic clock</canvas> </body> </html> 每次都刷新加載image對象不怎么好，我是在google瀏覽器中測試的，建議在
google瀏覽器中運行上面代碼。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
