canvas元素———表盤(pán)
標(biāo)簽：
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>
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦