canvas元素———表盘
标签：
JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="wrap" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
var cxt = wrap.getContext("2d");
var timer = null;
//定义一个方法
function setTime() {
//画一个表盘
cxt.clearRect(0, 0, wrap.width, wrap.height);
cxt.beginPath();
cxt.lineWidth = 10;
cxt.arc(300, 300, 200, 0, 2 * Math.PI, false);
cxt.strokeStyle = "#FF0000";
cxt.fillStyle = "aqua";
cxt.stroke();
cxt.fill();
//循环将12个粗刻度画到表盘中
for(var i = 0; i < 12; i++) {
cxt.beginPath();
cxt.lineWidth = 10;
cxt.moveTo(300, 300);
cxt.lineTo(Math.cos((i * 30) / 180 * Math.PI) * 200 + 300, (-Math.sin((i * 30) / 180 * Math.PI) * 200 + 300));
cxt.stroke();
}
//循环将60个秒刻度画到表盘中
for(var i = 0; i < 60; i++) {
cxt.beginPath();
cxt.lineWidth = 2;
cxt.moveTo(300, 300);
cxt.lineTo(Math.cos((i * 6) / 180 * Math.PI) * 200 + 300, (-Math.sin((i * 6) / 180 * Math.PI) * 200 + 300));
cxt.stroke();
}
//画一个小圆，将刻度线条覆盖
cxt.beginPath();
cxt.lineWidth = 10;
cxt.arc(300, 300, 180, 0, 2 * Math.PI, false);
cxt.strokeStyle = "#FF0000";
cxt.fillStyle = "aqua";
cxt.stroke();
cxt.fill();
//在表盘中写入数字
cxt.beginPath();
cxt.lineWidth = 2;
var clg = cxt.createLinearGradient(500, 400, 1000, 600);
clg.addColorStop(1, "red");
cxt.fillStyle = clg;
for(var i = 0; i < 12; i++) {
cxt.font = " 16px Arial ";
cxt.fillText(i + 1, Math.cos((i * 30 + 300) / 180 * Math.PI) * 150 + 300, (Math.sin((i * 30 + 300) / 180 * Math.PI) * 150 + 300));
}
cxt.stroke();
//创建当前Date对象
nowTime = new Date();
hour = nowTime.getHours();
minute = nowTime.getMinutes();
second = nowTime.getSeconds();
var hoursDeg, minutesDeg;
//当前时，分，秒
hourDeg = -90 + (360 / 60 * 5) / 60 * minute + (360 / 12 * hour);
minuteDeg = -90 + (360 / 60 * minute) + ((360 / 60) / 60 * second);
secondDeg = -90 + 360 / 60 * second;
//在表盘上 时，分，秒针画圆
cxt.beginPath();
cxt.lineWidth = 10;
cxt.strokeStyle = "red";
cxt.moveTo(300, 300);
cxt.arc(300, 300, 80, hourDeg * Math.PI / 180, hourDeg * Math.PI / 180, false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth = 2;
cxt.strokeStyle = "blueviolet";
cxt.moveTo(300, 300);
cxt.arc(300, 300, 200, secondDeg * Math.PI / 180, secondDeg * Math.PI / 180, false);
cxt.stroke();
cxt.beginPath();
cxt.lineWidth = 5;
cxt.strokeStyle = "blue";
cxt.moveTo(300, 300);
cxt.arc(300, 300, 150, minuteDeg * Math.PI / 180, minuteDeg * Math.PI / 180, false);
cxt.stroke();
}
setTime();
//定时器
timer = setInterval(setTime, 1000);
</script></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦