canvas绘制动态时钟

最新推荐文章于 2023-04-07 10:19:57 发布

香蕉芭辣

最新推荐文章于 2023-04-07 10:19:57 发布

阅读量352

点赞数

文章标签： canvas html5

本文链接：https://blog.csdn.net/weixin_44049725/article/details/103721858

版权

本文介绍如何使用HTML5的Canvas元素结合JavaScript绘制一个动态时钟。通过解析时钟的构成部分——表盘和指针，逐步实现时钟的绘制效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用元素不是非常难，但需要一些基本的HTML和JavaScript知识。
我们来利用canvas 画布元素和js结合绘制一个时钟，先上效果图：
在这里插入图片描述
画图之前，先把思路捋一遍：首先分解一下这个时钟的图形，它是由表盘（圆形）和指针（直线）组成。然后我们就按部就班一步一步进行绘制就可以了。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>clock</title>
</head>
<body>
    <canvas id="clock" width="500" height="500"></canvas>
    <script>
    	var clock = document.getElementById("clock");  //获取canvas元素
		var context = clock.getContext("2d");	//获取2d绘图上下文。
		
		//封装一个绘制时钟的函数
		function drawClock(){
    
			context.clearRect(0,0,500,500)//清除画布
			var now = new Date();		//实例化一个时间对象
			var second = now.getSeconds();  
			var minute = now.getMinutes();
			var hour1 = now.getHours();
			var hour

最低0.47元/天解锁文章