canvas时钟详解编程语言

使用canvas实现时钟
效果图：
canvas时钟详解编程语言
代码如下，复制即可使用：
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>canvas时钟</title> 
<style> 
div { 
text-align: center; 
margin-top: 15%; 
} 
</style> 
</head> 
<body> 
<div> 
<canvas id="clock" height="200px" width="200px"></canvas> 
</div> 
<script> 
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 rem = width / 200; 
//    画圆 
function drawBackground() { 
ctx.save();//save()    保存当前环境的状态 
        ctx.translate(r, r);//translate()    重新映射画布上的 (0,0) 位置 
        ctx.beginPath();//beginPath()    起始一条路径，或重置当前路径 
        ctx.lineWidth = 10 * rem;//lineWidth    设置或返回当前的线条宽度 
        ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI, false) //arc()    创建弧/曲线（用于创建圆形或部分圆） 
        ctx.stroke();//stroke()    绘制已定义的路径 
//12个点 
var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; 
ctx.font = 18 * rem + "px arial"; 
ctx.textAlign = "center";//textAlign    设置或返回文本内容的当前对齐方式 
        ctx.textBaseline = "middle";//textBaseline    设置或返回在绘制文本时使用的当前文本基线 
        hourNumbers.forEach(function (number, i) { 
var rad = 2 * Math.PI / 12 * i; 
var x = Math.cos(rad) * (r - 30 * rem); 
var y = Math.sin(rad) * (r - 30 * rem); 
ctx.fillText(number, x, y);//fillText()    在画布上绘制“被填充的”文本 
        }); 
//60个点 
for (var i = 0; i < 60; i++) { 
var rad = 2 * Math.PI / 60 * i; 
var x = Math.cos(rad) * (r - 18 * rem); 
var y = Math.sin(rad) * (r - 18 * rem); 
ctx.beginPath(); 
if (i % 5 === 0) { 
ctx.fillStyle = "red"; 
ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); 
} else { 
ctx.fillStyle = "#eee"; 
ctx.arc(x, y, 2 * rem, 0, 2 * Math.PI, false); 
} 
ctx.fill(); 
} 
} 
//    时针 
function drawHour(hour, minute) { 
ctx.save(); 
ctx.beginPath();//beginPath()    起始一条路径，或重置当前路径 
var rad = 2 * Math.PI / 12 * hour; 
var mrad = 2 * Math.PI / 12 / 60 * minute; 
ctx.rotate(rad + mrad); 
ctx.lineWidth = 6 * rem; 
ctx.lineCap = 'round'; 
ctx.moveTo(0, 10 * rem); 
ctx.lineTo(0, -r / 2); 
ctx.stroke(); 
ctx.restore(); 
} 
//分针 
function drawMinute(minute) { 
ctx.save(); 
ctx.beginPath(); 
var rad = 2 * Math.PI / 60 * minute; 
ctx.rotate(rad); 
ctx.lineWidth = 3 * rem; 
ctx.lineCap = 'round'; 
ctx.moveTo(0, 10 * rem); 
ctx.lineTo(0, -r + 30 * rem); 
ctx.stroke(); 
ctx.restore(); 
} 
//秒针 
function drawSecond(second) { 
ctx.save(); 
ctx.beginPath(); 
ctx.fillStyle = "red"; 
var rad = 2 * Math.PI / 60 * second; 
ctx.rotate(rad); 
ctx.moveTo(-2 * rem, 20 * rem);//moveTo()    把路径移动到画布中的指定点，不创建线条 
        ctx.lineTo(2 * rem, 20 * rem);//lineTo()    添加一个新点，然后在画布中创建从该点到最后指定点的线条 
        ctx.lineTo(1, -r + 18 * rem); 
ctx.lineTo(-1, -r + 18 * rem); 
ctx.fill();//fill()    填充当前绘图（路径） 
        ctx.restore(); 
} 
//    圆点 
function drawDot() { 
ctx.beginPath(); 
ctx.fillStyle = "write"; 
ctx.arc(0, 0, 3 * rem, 0, 2 * Math.PI, false); 
ctx.fill(); 
} 
function draw() { 
ctx.clearRect(0, 0, width, height);//clearRect()    在给定的矩形内清除指定的像素 
var now = new Date(); 
var hour = now.getHours(); 
var minute = now.getMinutes(); 
var second = now.getSeconds(); 
drawBackground(); 
drawHour(hour, minute); 
drawMinute(minute); 
drawSecond(second); 
drawDot(); 
ctx.restore();//restore()    返回之前保存过的路径状态和属性 
    } 
draw(); 
setInterval(draw, 1000); 
</script> 
</body> 
</html>
如有错误，欢迎联系我改正，非常感谢！！！
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/12326.html
canvas时钟详解编程语言

相关推荐

发表回复
