canvas画的时钟
结合几天来学习的canvas的API，终于完成了一个时钟呵呵
html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas</title> <style type="text/css"> canvas { border: 1px solid black; } #change{width:200px; line-height:30px; color:#fff; text-align:center; background:blue;} </style> <script src="canvas.js" type="text/javascript" charset="utf-8"></script> </head> <body> <canvas id="canvas" width="600" height="400">current stock price: $3.15 +0.15</canvas> </html>
js
window.onload = function() { new clock(); } function clock() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 300, 300); var date = new Date(); //获取当前时间 this.hour = date.getHours(); this.min = date.getMinutes(); this.sec = date.getSeconds(); this.hour = this.hour + this.min / 60; this.hour = this.hour > 12 ? this.hour - 12 : this.hour; this.radius = 115; this.dotX = 150; this.dotY = 150; this.maxBorderWidth = 8; this.minBorderWidth = 2; this.clockBg(); this.drawHour(); this.drawMin(); this.drawSec(); this.onreset(); } clock.prototype.onreset = function() { var ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 300, 300); var date = new Date(); //获取当前时间 this.hour = date.getHours(); this.min = date.getMinutes(); this.sec = date.getSeconds(); this.hour = this.hour + this.min / 60; this.hour = this.hour > 12 ? this.hour - 12 : this.hour; this.clockBg(); this.drawHour(); this.drawMin(); this.drawSec(); var self = this; setInterval(function() { self.onreset(); }, 1000); } clock.prototype.clockBg = function() { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillStyle = "#e3e3e3"; ctx.arc(this.dotX, this.dotY, this.radius, 0, 2 * Math.PI, false); ctx.fill(); ctx.closePath(); for (var i = 0; i < 60; i++) { ctx.save(); var pointLong; if (i % 5 == 0) { ctx.lineWidth = this.maxBorderWidth; pointLong = 25; } else { ctx.lineWidth = this.minBorderWidth; pointLong = 12; } ctx.strokeStyle = "#000"; ctx.translate(this.dotX, this.dotY); ctx.rotate(i * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -this.radius + this.maxBorderWidth); ctx.lineTo(0, -this.radius + this.maxBorderWidth + pointLong); ctx.closePath(); ctx.stroke(); ctx.restore(); }; } clock.prototype.drawHour = function() { var ctx = canvas.getContext('2d'); ctx.save(); ctx.strokeStyle = "#000"; ctx.lineWidth = this.maxBorderWidth; ctx.translate(this.dotX, this.dotY); ctx.rotate(this.hour * 30 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, 20); ctx.lineTo(0, -70); ctx.closePath(); ctx.stroke(); ctx.restore(); } clock.prototype.drawMin = function () { var ctx = canvas.getContext('2d'); ctx.save(); ctx.strokeStyle = "#00"; ctx.lineWidth = this.maxBorderWidth; ctx.translate(this.dotX, this.dotY); ctx.rotate(this.min*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(0, 20); ctx.lineTo(0, -80); ctx.closePath(); ctx.stroke(); ctx.restore(); } clock.prototype.drawSec = function() { var ctx = canvas.getContext('2d'); ctx.save(); ctx.strokeStyle = "#f00"; ctx.lineWidth = this.minBorderWidth; ctx.translate(this.dotX, this.dotY); ctx.rotate(this.sec * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, 20); ctx.lineTo(0, -100); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = "#f00"; ctx.arc(0, 0, 5, 0, 2 * Math.PI, true); ctx.closePath(); ctx.fill(); ctx.restore(); } function drawTime() { var clock = document.getElementById('canvas'); var ctx = clock.getContext('2d'); ctx.clearRect(0, 0, 244, 300); var date = new Date(); //获取当前时间 var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); hour = hour + min / 60; hour = hour > 12 ? hour - 12 : hour; var width = 244; var height = 280; var dot = { //时钟中心 x: width / 2, y: width / 2, radius: 4 } var radius = 115; var maxBorderWidth = 8; var minBorderWidth = 2; //绘制时钟中心点 ctx.lineWidth = maxBorderWidth; ctx.beginPath(); ctx.fillStyle = "#e2e2e2"; ctx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true); ctx.fill(); ctx.closePath(); //绘制时刻度、分刻度 for (var i = 0; i < 60; i++) { ctx.save(); var pointLong; if (i % 5 == 0) { ctx.lineWidth = maxBorderWidth; pointLong = 25; } else { ctx.lineWidth = minBorderWidth; pointLong = 12; } ctx.strokeStyle = "#000"; ctx.translate(dot.x, dot.y); ctx.rotate(i * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -radius + maxBorderWidth); ctx.lineTo(0, -radius + maxBorderWidth + pointLong); ctx.closePath(); ctx.stroke(); ctx.restore(); } //绘制时针 ctx.save(); ctx.lineWidth = maxBorderWidth; ctx.translate(dot.x, dot.y); ctx.rotate(hour * 30 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -55); ctx.lineTo(0, 25); ctx.closePath(); ctx.stroke(); ctx.restore(); //绘制分针 ctx.save(); ctx.lineWidth = maxBorderWidth; ctx.translate(dot.x, dot.y); ctx.rotate(min * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -97); ctx.lineTo(0, 25); ctx.closePath(); ctx.stroke(); ctx.restore(); //绘制秒针 ctx.save(); ctx.strokeStyle = "red"; ctx.lineWidth = minBorderWidth; ctx.translate(dot.x, dot.y); ctx.rotate(sec * 6 * Math.PI / 180); ctx.beginPath(); ctx.moveTo(0, -75); ctx.lineTo(0, 25); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = '#D6231C'; ctx.arc(0, -75, 6, 0, 2 * Math.PI, true); //绘制秒针针尖的小圆点 ctx.fill(); ctx.closePath(); ctx.restore(); //装饰时钟中心 两个小圆叠加 ctx.beginPath(); ctx.fillStyle = '#982127'; ctx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true); ctx.fill(); ctx.closePath(); ctx.beginPath(); ctx.fillStyle = '#D6231C'; ctx.arc(dot.x, dot.y, 2, 0, 2 * Math.PI, true); ctx.fill(); ctx.closePath(); //再时钟上添加签名 ctx.fillStyle = "#000"; ctx.font = "15px Comic Sans MS"; ctx.fillText("Chal Mine", dot.x - 30, dot.y + 50); }
