用canvas绘制时钟

最新推荐文章于 2023-02-22 13:52:19 发布
最新推荐文章于 2023-02-22 13:52:19 发布
阅读量374 收藏
点赞数 1
分类专栏： canvas 文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Honey_tianming/article/details/82829367
版权

canvas是h5新增的元素，下面我们开学习一下怎样用canvas绘制一个时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style>
			
			canvas{
				border:1px solid #000000;
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="500" height="500"></canvas>
	</body>
	<script type="text/javascript">
		var can=document.getElementById('can');
		var ctx=can.getContext('2d');
		
	
		function shijian(){
	    ctx.clearRect(0,0,500,500);
		
		//表盘
		ctx.save();
		ctx.beginPath();
		ctx.lineWidth=5;
		ctx.arc(250,250,100,0,Math.PI*2);
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
	
		
		//刻度
        for(var i=0;i<60;i++){
        ctx.save();
		ctx.translate(250,250);
		ctx.rotate(i*Math.PI/30);
		ctx.beginPath();
		if(i%5==0){
			ctx.moveTo(0,-100);
		    ctx.lineTo(0,-85); 	
		    ctx.lineWidth =5;
		}
		else{
			ctx.moveTo(0,-100);
		    ctx.lineTo(0,-90); 	
		    ctx.lineWidth =2;
		}
		ctx.closePath();
		ctx.stroke();
		ctx.restore();
      }
		//获取时间
	
		var time=new Date();
		var hours=time.getHours();
		var min=time.getMinutes();
		var sec=time.getSeconds();
		var hour=hours-12>0?hours-12:hours;
	
		
		//时针
		
		ctx.save();
		ctx.translate(250,250);
		ctx.rotate((hour+min/60)*Math.PI/6);
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(0,-50); 	
		ctx.lineWidth=6;
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
		//分针
		ctx.save();
		ctx.translate(250,250);
		ctx.rotate((min+sec/60)*Math.PI/60);
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(0,-70); 	
		ctx.lineWidth=4;
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
		//秒针
		ctx.save();
		ctx.translate(250,250);
		ctx.rotate(sec*Math.PI/30);
		ctx.beginPath();
		ctx.moveTo(0,0);
		ctx.lineTo(0,-80); 	
		ctx.lineWidth=2;
		ctx.stroke();
		ctx.closePath();
		ctx.restore();
		//圆心
		ctx.save();
		ctx.translate(250,250);
		ctx.beginPath();
		ctx.arc(0,0,5,0,Math.PI*2);
		ctx.fillStyle='blue';
		ctx.fill();
		ctx.closePath();
		ctx.restore();
		//字体
	    ctx.save();
		ctx.translate(250,250);
	    ctx.font="20px Arial";
		ctx.textAlign='center';
		ctx.fillText("天明城",0,-60);
        ctx.restore();
		
}
shijian();
setInterval(shijian,1000);
</script>
</html>

效果如下

在这里插入图片描述

Honey-回忆天明
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js+html5实现canvas绘制网页时钟的方法
11-23
本文实例讲述了js+html5实现canvas绘制网页时钟的方法，画的是一个可用于网页的、带摆的钟表，可以通过按钮调整其大小和位置，具体实现内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Clock</title> [removed] var xClock=300; //表心位置 var yClock=250; //表心位置 var d=180.0;//钟表圆面的半径 var value = -d*1.07
canvas常用方法，canvas绘制时钟案例
study_way的博客
10-26 352
在路径对象上，使用不同的绘图命令来定义路径的形状。
Canvas绘制一个时钟
秃头小桂子
05-11 2239
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
canvas画时钟
pumpkin_truck的博客
06-04 2508
canvas画时钟 今天我们来学习学习如何使用canvas画时钟 首先我们得了解一下canvas是什么，怎么使用它： Canvas 中文名称叫“画布”，通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。 它最大得特点就是绘制它需要使用脚本绘制。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 首先在html5中添加canvas元素，规定元素的id ，width,和height，这次的高度和宽度我习惯用js书写。 <canvas id="canvas"&
＜canvas＞利用Canvas绘制简易版挂钟
m0_48465196的博客
02-22 670
使用Canvas绘制一个挂钟
JavaScript Canvas绘制时钟
最新发布
02-22
在这个场景中，我们将深入探讨如何使用JavaScript和Canvas API来创建一个实时更新的时钟。 首先，我们需要在HTML中创建一个`<canvas>`元素，它是JavaScript画布的基础： ```html <!DOCTYPE html> <title>...
使用canvas绘制超炫时钟
09-28
以上就是使用canvas绘制超炫时钟的基本流程。这个过程不仅涉及到HTML5 canvas的绘图技术，还涉及到基本的几何和三角函数知识，如正弦、余弦以及角度与弧度的转换。通过这种方式，我们可以创建出极具视觉吸引力的交互...
JS+Canvas绘制时钟效果
10-22
总结来说，使用JavaScript和Canvas绘制时钟涉及的关键技术有：获取和设置Canvas上下文、时间的处理、坐标变换、路径绘制和线条样式控制。通过熟练掌握这些技术，你可以创建出各种复杂的图形和动画效果。
canvas绘制表盘时钟
08-31
总的来说，使用Canvas API绘制表盘时钟是一个很好的实践项目，它展示了如何利用JavaScript和Canvas API实现动态、交互式的网页图形。这个过程涉及到数学（如角度计算）、时间和日期处理，以及图形绘制技巧，对提升...
微信小程序使用canvas绘制实现时钟
11-01
接下来定义`drawClock`方法，用于在canvas上绘制时钟： ```javascript drawClock() { const ctx = this.data.ctx; const now = new Date(); // 清除画布 ctx.clearRect(0, 0, 300, 300); // 绘制时钟圆盘 ...
HTML5 Canvas绘制时钟
06-01
NULL 博文链接：https://wenhai.iteye.com/blog/2158714
HTML5：canvas制作时钟
02-22
每周定期有公开直播课，有业内大咖为你授业解惑，真实项目案例分享，从零到大神的成功之路，从你相信我开始!!!
Html5-canvas 时钟
03-14
使用html5中的canvas标签+jquery绘制的时钟走动代码
使用canvas制作一个动态时钟
05-02
使用canvas实现动态时钟效果
微信小程序开发之——时钟-Canvas介绍(1)
我的博客
09-30 1184
一 概述 Canvas画布属性介绍 Canvas用法示例(新/旧) 二 Canvas画布属性介绍 属性 类型 说明 type string 指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0) canvas-id string canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 disable-scroll boolean 当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新 bindtouchstar
canvas时钟绘制方法总结
monparadis的博客
11-04 764
1.首先需要一个画布，因为要画时钟肯定需要计算角度，Math.PI*degree/180，所以将Math.PI存起来 2.绘制表盘，表盘是由60个刻度线构成，时间整点刻度是5的倍数，用着个特点来算刻度线的颜色和宽度 3.绘制时钟一定要知道时间，然后计算时分秒角度 4.绘制时分秒 5.指针时刻在走动，每次绘制记得把画布清空，上面绘制表盘里面使用了清空方法 注意点：每次的状态记得保存，每一帧画完记得清空 绘制完一帧记得使用closePath的方法...
使用canvas简单绘制时钟
weixin_49411859的博客
07-18 199
html部分： <canvas id="canvas" width="800" height="600"></canvas> js部分： class Clock { constructor(){ this.canvas = document.getElementById('canvas'); this.ctx = this.canvas.getContext('2d'); } init(){
Canvas之绘制时钟
summer爱前端
08-18 1327
用canvas画一个时钟玩玩吧，比css+js简单太多了……
使用canvas画一个时钟
kaelyn_X的博客
10-17 1000
介绍一下如何使用 HTML5 的 canvas 标签和 JavaScript 画一个时钟。
实现HTML5 Canvas绘制时钟
06-01
好的，下面是一个简单的HTML5 Canvas绘制时钟的示例代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas时钟</title> <style> canvas { border: 2px solid black; } </style> </head> <body> <canvas id="clock" width="200" height="200"></canvas> <script> function drawClock() { // 获取Canvas元素 var canvas = document.getElementById("clock"); var ctx = canvas.getContext("2d"); // 获取Canvas中心点坐标 var centerX = canvas.width / 2; var centerY = canvas.height / 2; // 绘制表盘 ctx.beginPath(); ctx.arc(centerX, centerY, 80, 0, 2 * Math.PI); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制刻度 for (var i = 1; i <= 12; i++) { var angle = i * Math.PI / 6; var x = centerX + 60 * Math.sin(angle); var y = centerY - 60 * Math.cos(angle); ctx.beginPath(); ctx.arc(x, y, 5, 0, 2 * Math.PI); ctx.fillStyle = "black"; ctx.fill(); } // 绘制时针 var now = new Date(); var hour = now.getHours() % 12; var minute = now.getMinutes(); var second = now.getSeconds(); var hourAngle = (hour + minute / 60) * Math.PI / 6; var hourX = centerX + 40 * Math.sin(hourAngle); var hourY = centerY - 40 * Math.cos(hourAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(hourX, hourY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制分针 var minuteAngle = minute * Math.PI / 30; var minuteX = centerX + 60 * Math.sin(minuteAngle); var minuteY = centerY - 60 * Math.cos(minuteAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(minuteX, minuteY); ctx.strokeStyle = "black"; ctx.stroke(); // 绘制秒针 var secondAngle = second * Math.PI / 30; var secondX = centerX + 60 * Math.sin(secondAngle); var secondY = centerY - 60 * Math.cos(secondAngle); ctx.beginPath(); ctx.moveTo(centerX, centerY); ctx.lineTo(secondX, secondY); ctx.strokeStyle = "red"; ctx.stroke(); } // 每秒钟更新时钟 setInterval(drawClock, 1000); </script> </body> </html> ``` 这段代码使用Canvas绘制了一个时钟，并且每秒钟更新一次。你可以将代码复制到一个HTML文件中运行，就可以看到时钟的效果了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值