# html：canvas画布绘图简单入门-绘制时钟-3

<canvas id="canvas"
width="600"
height="600"></canvas>
<script>
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
let width = canvas.width
let height = canvas.height
// 绘制内容区域相对画布的大小 80%
let scale = 0.8;
// 计算半径
let radius = Math.floor(Math.min(width, height) * scale * 0.5);
// 绘制外边框
// ctx.beginPath();
// ctx.strokeRect(0, 0, width, height);
// ctx.closePath()
// 绘制时钟刻度
function drawClockScale({
number = 12,
strokeStyle = 'black',
lineWidth = 3,
lineLength = 20,
}) {
ctx.save();
ctx.strokeStyle = strokeStyle;
ctx.lineWidth = lineWidth;
let rotateAngle = (360 / number);
for (let i = 0; i < number; i++) {
ctx.rotate((Math.PI / 180) * rotateAngle);
ctx.beginPath();
ctx.moveTo(radius - lineLength, 0);
ctx.stroke();
ctx.closePath()
}
ctx.restore();
}
function drawClock() {
ctx.clearRect(0, 0, width, height);
ctx.save();
// 将坐标轴原点移动到画布中心
ctx.translate(width / 2, height / 2);
// 旋转坐标轴x指向画布正上方
ctx.rotate(-Math.PI / 180 * 90);
// 分针和秒针的刻度
drawClockScale({
number: 60,
strokeStyle: 'green',
lineWidth: 4,
lineLength: 14
});
// 时针刻度
drawClockScale({
number: 12,
strokeStyle: 'red',
lineWidth: 8,
lineLength: 20
});
// 绘制指针
let now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();
console.log(${hour}:${minute}: \${second});
// 绘制秒针
ctx.save();
ctx.beginPath();
ctx.rotate((Math.PI / 180) * (360 / 60) * second);
ctx.strokeStyle = "deepskyblue";
ctx.lineWidth = 2;
ctx.moveTo(-20, 0);
ctx.lineTo(radius - 30, 0);
ctx.stroke();
ctx.closePath()
ctx.restore();
// 绘制分针
ctx.save();
ctx.rotate((Math.PI / 180) * ((360 / 60) * minute + (360 / 60 / 60) * second));
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.lineWidth = 4;
ctx.moveTo(-20, 0);
ctx.lineTo(radius - 40, 0);
ctx.stroke();
ctx.closePath()
ctx.restore();
// 处理成12小时制
if (hour > 12) {
hour = hour - 12
}
// 绘制时针
ctx.save();
ctx.beginPath();
ctx.rotate((Math.PI / 180) * ((360 / 12) * hour + (360 / 12 / 60) * minute + (360 / 12 / 60 / 60) *
second));
ctx.strokeStyle = "red";
ctx.lineWidth = 8;
ctx.moveTo(-20, 0);
ctx.lineTo(radius - 50, 0);
ctx.stroke();
ctx.closePath()
ctx.restore();
// 绘制圆心
ctx.beginPath();
ctx.fillStyle = "grey";
ctx.lineWidth = 10;
ctx.arc(0, 0, 10, 0, Math.PI / 180 * 360);
ctx.fill();
ctx.closePath()
// 绘制圆
ctx.beginPath();
ctx.strokeStyle = "grey";
ctx.lineWidth = 10;
ctx.arc(0, 0, radius, 0, Math.PI / 180 * 360);
ctx.stroke();
ctx.closePath()
ctx.restore();
}
// 每隔1秒重绘一次
setInterval(() => {
drawClock();
}, 1000)
</script>


|
4天前
|

HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中，Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测，并具有跨平台兼容性，为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步，Canvas在游戏领域的应用将持续增长。
15 4
|
4天前
|

14 1
|
4天前
|

12 1
|
4天前
|

【专栏：HTML 进阶篇】HTML5 新特性探索：视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验，支持自适应和交互控制；画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战，HTML5持续发展，为网页创新带来更多可能。拥抱这些新特性，创造更丰富的网页世界！
21 0
|
4天前
|

【专栏：HTML 基础篇】HTML 入门：从零开始构建你的第一个网页
【4月更文挑战第30天】本文引导初学者从零开始学习HTML，了解这种标记语言用于构建网页的基础知识。通过介绍HTML的基本结构，如文档类型声明、根标签、头部和主体，以及如何添加文本、设置标题、插入图片、创建链接、使用列表、制作表格和设计表单，帮助读者构建第一个网页。同时强调，结合CSS可实现网页的美化。
17 0
|
4天前
|

28 0
|
4天前
|

38 0
|
4天前
|

HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果，就像一些小颗粒从进度条上散落下来
19 0
|
4天前
|

：掌握移动端开发：HTML5 与 CSS3 的高效实践
：掌握移动端开发：HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
4天前
|

【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
【4月更文挑战第30天】PWA（Progressive Web Apps）结合现代Web技术，提供接近原生应用的体验。HTML在PWA中构建页面结构和内容，响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作，保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步，HTML与CSS在PWA中的应用将更广泛。
36 10