生活随笔
收集整理的這篇文章主要介紹了
原生JS实现Canvas时钟
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML中只有一個(gè)div包裹一個(gè)canvas元素，重點(diǎn)看JS部分。
重點(diǎn)：
- beginPath() 方法在一個(gè)畫布中開始子路徑的一個(gè)新的集合。 ?也就是說，運(yùn)行到這個(gè)函數(shù)時(shí)，context中止當(dāng)前的路徑，立刻把當(dāng)前的坐標(biāo)設(shè)置為起點(diǎn)(0,0)，開始一條新的路徑。
- ctx.save()表示保存save函數(shù)之前的狀態(tài)，ctx.restore()表示獲取save保存的狀態(tài)
- 其他方法參考API
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Clock</title><style>
div {text-
align: center;margin-
top: 100px;}#clock {border-radius: 50%
;box-
shadow: 2px 2px 20px #eee;}</style>
</head>
<body><div><canvas id="clock" height="600px" width="600px"></canvas> </div> <script>
window.onload =
function() {var dom = document.getElementById('clock'
);var ctx = dom.getContext('2d'
);var width =
ctx.canvas.width;var height =
ctx.canvas.height;var r = width / 2
;var ratio = width / 200
;dom.onmouseover =
function () {dom.style.boxShadow = "2px 2px 20px #ddd"
;}dom.onmouseout =
function () {dom.style.boxShadow = "2px 2px 20px #eee"
;}function drawBackground() {ctx.save()ctx.translate(r, r);ctx.lineWidth = 6 *
ratio;ctx.beginPath();ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2 * Math.PI, false);ctx.fillStyle = '#fff'
ctx.fill();var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2
];ctx.font = 18 * ratio + "px Arial"
;ctx.textAlign = 'center'
;ctx.textBaseline = 'middle'
;hourNumbers.forEach(function(number, i) {var rad = 2 * Math.PI / 12 *
i;var x = Math.cos(rad) * (r - 30 *
ratio);var y = Math.sin(rad) * (r - 30 *
ratio);ctx.fillStyle = '#333'
ctx.fillText(number, x, y);});for(
var i = 0; i < 60; i++
) {var rad = 2 * Math.PI / 60 *
i; var x = Math.cos(rad) * (r - 15 *
ratio);var y = Math.sin(rad) * (r - 15 *
ratio);ctx.beginPath();if (i % 5 === 0
) {ctx.fillStyle = '#666'
;ctx.arc(x, y, 1.5 * ratio, 0, 2 * Math.PI,
false);} else {ctx.fillStyle = '#666'
;ctx.arc(x, y, 1 * ratio, 0, 2 * Math.PI,
false);}ctx.fill();}}function drawHour(hour, minute) {ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 12 *
hour;var mrad = 2 * Math.PI /12 /60 *
minute;ctx.rotate(rad +
mrad);ctx.lineWidth = 6 *
ratio;ctx.lineCap = 'round'
;ctx.moveTo(0, 10 *
ratio);ctx.lineTo(0, -r / 2 + 4 *
ratio);ctx.stroke();ctx.restore();}function drawMinute(minute) {ctx.save();ctx.beginPath();var rad = 2 * Math.PI / 60 *
minute;ctx.rotate(rad);ctx.lineWidth = 3 *
ratio;ctx.lineCap = 'round'
;ctx.moveTo(0, 10 *
ratio);ctx.lineTo(0, -r / 2 - 4 *
ratio);ctx.stroke();ctx.restore();}function drawSecond(second) {ctx.save();ctx.beginPath();ctx.fillStyle = '#930'
var rad = 2 * Math.PI / 60 *
second;ctx.rotate(rad); ctx.moveTo(-2 * ratio, 20 *
ratio);ctx.lineTo(2 * ratio, 20 *
ratio);ctx.lineTo(1, -r / 2 - 12 *
ratio);ctx.lineTo(-1, -r / 2 - 12 *
ratio);ctx.fill();ctx.restore();}function drawDot() {ctx.beginPath();ctx.fillStyle = '#EEE'
;ctx.arc(0, 0, 3 * ratio, 0, 2 * Math.PI,
false);ctx.fill();}function draw() {ctx.clearRect(0, 0
, width, height);var now =
new Date();var hour =
now.getHours();var minute =
now.getMinutes();var second =
now.getSeconds();drawBackground();drawDot();drawHour(hour, minute);drawMinute(minute);drawSecond(second);ctx.restore();}draw();setInterval(draw, 1000
);}</script>
</body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/garmin6/p/10613144.html
總結(jié)
以上是生活随笔為你收集整理的原生JS实现Canvas时钟的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
