canvas-原生js实现时钟绘图效果

本文主要是介绍canvas-原生js实现时钟绘图效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

canvas-原生js实现时钟绘图效果目录

文章目录

前言
代码
效果查看

前言

本文为canvas实现时钟效果
可直接复制使用

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><canvas id="canvas"></canvas><script src="clickMain.js"></script>
</body>
</html>

let c = document.getElementById('canvas');
// 设置画布的宽高
c.width = 400,
c.height = 400;let ctx = c.getContext('2d');
// 常量设计
// 字体大小，边距
// 指针转动的
// 时针
// 数字间的间距
// 半径为减去边距的长
// 文字的横坐标
const FONT_HEIGHT = 15,MARGIN = 35,HAND_TRUNCATION = c.width / 25,HOUR_HAND_TRUNCATION = c.width / 10,NUMERAL_SPACING = 20,RADIUS = c.width / 2 - MARGIN,HAND_RADIUS = RADIUS + NUMERAL_SPACING;// 绘圆
function drawCircle() {ctx.beginPath();// 中点做圆心ctx.arc(c.width/2, c.height/2,RADIUS, 0, Math.PI * 2,true);ctx.stroke();
}// 绘刻度
function drawNumerals() {let numerals = [1,2,3,4,5,6,7,8,9,10,11,12],angle = 0,numeralWidth = 0;numerals.forEach(numeral => {// 平分为2pi/12angle = Math.PI/6 * (numeral - 3);numeralWidth = ctx.measureText(numeral).width;// 文字的位置ctx.fillText(numeral,c.width/2 + Math.cos(angle) * (HAND_RADIUS) - numeralWidth/2,c.height/2 + Math.sin(angle) * (HAND_RADIUS) +FONT_HEIGHT/3);});
}// 绘制圆心的小圆
function drawCenter() {ctx.beginPath();ctx.arc(c.width/2, c.height/2, 5, 0, Math.PI*2, true);ctx.fill();
}// 绘指针
function drawHand(loc, isHour, thickness){let angle = (Math.PI*2) * (loc/60) - Math.PI/2,handRadius = isHour ? RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION: RADIUS - HAND_TRUNCATION;ctx.moveTo(c.width/2, c.height/2);ctx.lineWidth = thickness;ctx.lineTo(c.width/2 + Math.cos(angle)*handRadius,c.height/2 + Math.sin(angle)*handRadius);ctx.stroke();
}function drawHands() {let date = new Date,hour = date.getHours();hour = hour > 12 ? hour - 12 : hour;drawHand(hour * 5 + (date.getMinutes()/60)*5, true, 0.5);drawHand(date.getMinutes(), false, 0.5);drawHand(date.getSeconds(), false, 0.2);
}function drawClock() {ctx.clearRect(0,0,c.width,c.height);drawCircle();drawCenter();drawHands();drawNumerals();
}ctx.font = FONT_HEIGHT + 'px Arial';
loop = setInterval(drawClock, 1000);