canvas画的时钟
2024-08-28 17:43:16
结合几天来学习的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);
}
最新文章
- 【编程题目】在 O(1)时间内删除链表结点
- js json排序
- 《JavaScript语言精粹》学习笔记
- Material Design For Xamarin.Forms
- 思考探索,如何才能高效访问我的这个DataTable?
- 如何使用10个小时搭建出个人域名而又Geek的独立博客?
- 使用Docker解决同一服务器运行不同版本PHP方案。
- 使用typedef语句定义数组类型
- 使用git pull时,项目没有更新?
- storm定时任务【tick】
- Quartus16.0如何使用TCL脚本
- EBS各个应用简称
- 和逛微博、刷朋友圈一样玩转 GitHub
- session 和 cookie
- iOS 快速排序
- JS隐藏号码中间4位
- 个人博客作业-week5-敏捷开发方法读后感
- EUV光刻!宇宙最强DDR4内存造出
- A1013. Battle Over Cities
- ssh和scp时指定端口