詳解通過(guò)Canvas + JS 實(shí)現(xiàn)簡(jiǎn)易的時(shí)鐘
之前學(xué)習(xí)了下html5中的canvas元素，為了練練手就實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的時(shí)鐘。時(shí)鐘本身并不復(fù)雜，也沒(méi)有使用圖片進(jìn)行美化，不過(guò)麻雀雖小五臟俱全。
之前學(xué)習(xí)了下html5中的canvas元素，為了練練手就實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的時(shí)鐘。時(shí)鐘本身并不復(fù)雜，也沒(méi)有使用圖片進(jìn)行美化，不過(guò)麻雀雖小五臟俱全，下面就與大家分享一下：
實(shí)現(xiàn)效果：
html代碼：
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Clock</title>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- }
- .canvas{
- margin-left: 20px;
- margin-top: 20px;
- border: solid 1px;
- }
- </style>
- </head>
- <body onload= "main()">
- <canvas class = "canvas" id="canvasId" width = '500px' height = '400px'></canvas>
- <script type= "text/javascript" src = "Clock.js"></script>
- </body>
- </html>
JS代碼:
- var Canvas = {};
- Canvas.cxt = document.getElementById('canvasId').getContext('2d');
- Canvas.Point = function(x, y){
- this.x = x;
- this.y = y;
- };
- /*擦除canvas上的所有圖形*/
- Canvas.clearCxt = function(){
- var me = this;
- var canvas = me.cxt.canvas;
- me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
- };
- /*時(shí)鐘*/
- Canvas.Clock = function(){
- var me = Canvas,
- c = me.cxt,
- radius = 150, /*半徑*/
- scale = 20, /*刻度長(zhǎng)度*/
- minangle = (1/30)*Math.PI, /*一分鐘的弧度*/
- hourangle = (1/6)*Math.PI, /*一小時(shí)的弧度*/
- hourHandLength = radius/2, /*時(shí)針長(zhǎng)度*/
- minHandLength = radius/3*2, /*分針長(zhǎng)度*/
- secHandLength = radius/10*9, /*秒針長(zhǎng)度*/
- center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圓心*/
- /*繪制圓心（表盤(pán)中心）*/
- function drawCenter(){
- c.save();
- c.translate(center.x, center.y);
- c.fillStyle = 'black';
- c.beginPath();
- c.arc(0, 0, radius/20, 0, 2*Math.PI);
- c.closePath();
- c.fill();
- c.stroke();
- c.restore();
- };
- /*通過(guò)坐標(biāo)變換繪制表盤(pán)*/
- function drawBackGround(){
- c.save();
- c.translate(center.x, center.y); /*平移變換*/
- /*繪制刻度*/
- function drawScale(){
- c.moveTo(radius - scale, 0);
- c.lineTo(radius, 0);
- };
- c.beginPath();
- c.arc(0, 0, radius, 0, 2*Math.PI, true);
- c.closePath();
- for (var i = 1; i <= 12; i++) {
- drawScale();
- c.rotate(hourangle); /*旋轉(zhuǎn)變換*/
- };
- /*繪制時(shí)間(3,6,9,12)*/
- c.font = " bold 30px impack"
- c.fillText("3", 110, 10);
- c.fillText("6", -7, 120);
- c.fillText("9", -120, 10);
- c.fillText("12", -16, -100);
- c.stroke();
- c.restore();
- };
- /*繪制時(shí)針(h: 當(dāng)前時(shí)（24小時(shí)制）)*/
- this.drawHourHand = function(h){
- h = h === 0? 24: h;
- c.save();
- c.translate(center.x, center.y);
- c.rotate(3/2*Math.PI);
- c.rotate(h*hourangle);
- c.beginPath();
- c.moveTo(0, 0);
- c.lineTo(hourHandLength, 0);
- c.stroke();
- c.restore();
- };
- /*繪制分針（m: 當(dāng)前分）*/
- this.drawMinHand = function(m){
- m = m === 0? 60: m;
- c.save();
- c.translate(center.x, center.y);
- c.rotate(3/2*Math.PI);
- c.rotate(m*minangle);
- c.beginPath();
- c.moveTo(0, 0);
- c.lineTo(minHandLength, 0);
- c.stroke();
- c.restore();
- };
- /*繪制秒針（s：當(dāng)前秒）*/
- this.drawSecHand = function(s){
- s = s === 0? 60: s;
- c.save();
- c.translate(center.x, center.y);
- c.rotate(3/2*Math.PI);
- c.rotate(s*minangle);
- c.beginPath();
- c.moveTo(0, 0);
- c.lineTo(secHandLength, 0);
- c.stroke();
- c.restore();
- };
- /*依據(jù)本機(jī)時(shí)間繪制時(shí)鐘*/
- this.drawClock = function(){
- var me = this;
- function draw(){
- var date = new Date();
- Canvas.clearCxt();
- drawBackGround();
- drawCenter();
- me.drawHourHand(date.getHours() + date.getMinutes()/60);
- me.drawMinHand(date.getMinutes() + date.getSeconds()/60);
- me.drawSecHand(date.getSeconds());
- }
- draw();
- setInterval(draw, 1000);
- };
- };
- var main = function(){
- var clock = new Canvas.Clock();
- clock.drawClock();
- };
代碼中涉及到了一些簡(jiǎn)單的canvas元素API 大家google一下即可，祝大家學(xué)習(xí)愉快:-D
原文鏈接：http://www.cnblogs.com/liubingblog/archive/2015/03/10/4325063.html
責(zé)任編輯：王雪燕
來(lái)源：
博客園
