Canvas绘制时钟（学习笔记）

最新推荐文章于 2022-01-08 12:14:53 发布
最新推荐文章于 2022-01-08 12:14:53 发布
阅读量319 收藏 1
点赞数
分类专栏： HTML5应用开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013096666/article/details/55105546
版权

Html 5的Canvas参考手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp

Canvas绘制时钟学习视频：http://www.imooc.com/learn/612


Demo和学习笔记

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas clocks</title>

<style type="text/css">
	div{
		text-align:center;
		margin-top:150px;
	}
	#clock{
		border:1px solid #ccc;
	}
</style>
</head>
<body>

	<div>
		<canvas id="clock" height="400px" width="400px"></canvas>
	</div>
	
	<!-- 注意JS的执行时间点 -->
	<script type="text/javascript" src="js/clock.js"></script>
</body>
</html>

clock.js 

/**
 * 
 */
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();
	ctx.translate(r,r);		//重新定义原点位置
	ctx.beginPath();	//起始路径
	ctx.lineWidth=10*rem;
	ctx.arc(0,0,r-ctx.lineWidth/2,0,2*Math.PI,false);
	ctx.stroke();	//绘制方式
	
	var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
	ctx.font=18*rem+'px Arial';
	//居中对齐
	ctx.textAlign='center';
	ctx.textBaseline='middle';
	//遍历数字
	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);
		
	});
	//遍历秒针点
	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='#000';
			ctx.arc(x,y,2*rem,0,2*Math.PI,false);
		}
		else{
			ctx.fillStyle='#ccc';
			ctx.arc(x,y,2*rem,0,2*Math.PI,false);
		}
		ctx.fill();
	}
}

//时针指针
function drawHour(hour,minute){
	ctx.save();
	ctx.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='#c14543';
	var rad=2*Math.PI/60*second;
	ctx.rotate(rad);	//旋转
	
	//秒针样式
	ctx.moveTo(-2*rem,20*rem);
	ctx.lineTo(2*rem,20*rem);
	ctx.lineTo(1,-r+18*rem);
	ctx.lineTo(-1,-r+18*rem);
	ctx.fill();
	ctx.restore();
}

//绘制圆点
function drawDot(){
	ctx.beginPath();
	ctx.fillStyle='#fff';
	ctx.arc(0,0,3*rem,0,2*Math.PI,false);
	ctx.fill();
	
}

function draw(){
	//清除之前的样式，重新绘制
	ctx.clearRect(0,0,width,height);
	
	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();
}

draw();
//每秒执行一次函数
setInterval(draw,1000);


总结：
通过视频学习，熟悉了html 5的canvas标签使用。在学习中，通过参考API文档了解每一个标签、属性、函数等的使用方法，对于前端学习很有帮助。

另外，在这段视频的学习中也遇到了一点小问题。在JavaScript的引用时，需要注意函数的执行时间点，并不是每一个JavaScript的引用部分都可以放在<head></head>中，有的时候可能会因为内容还未加载，就先执行了JS脚本，从而JS在获取id的时候值为null。这段时钟代码就是需要先加载canvas画布，然后再去执行JS部分获取其id值。

Missj1218
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas绘制一个时钟
秃头小桂子
05-11 2239
Canvas绘制一个时钟 Canvas：一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 博客地址：https://xiaofly.cn/post-details?id=627b9c9b5fcf765110cdcb6e 先上效果图： 先创建一个index.html，内容如下： <!-- index.html --> <!DOCTYPE html> <h
html5绘制会动的时钟,HTML5的绝活:巧用Canvas制作会动的时钟
weixin_42572134的博客
07-02 217
[javascript] view plaincopy$(function() {var canvas=document.getElementById("mycanvas");var context=canvas.getContext("2d");context.strokeStyle="rgb(255, 0, 0)";context.lineWidth=10;context.shadowColo...
自己做个时钟-html5的canvas
疯狂紫萧
12-25 1006
这个只是用来练习对html5的掌握程度的。 首先，时钟有一个表盘。 表盘包括框、刻度2个 框就是 一个圆，刻度是一个一个小的线段 圆用arc函数可以画出来，刻度只能通过画圆弧来表现。然后用另外一个小的圆把多余的线遮掉 同理，指针也可以这样来完成，通过一个角度为0的圆弧。 然后计算当前时间，通过判断时间来得到角度。 代码如下： var canvas = null;
Html5使用Canvas绘制时钟动画效果
setsunadoudou的博客
09-19 422
HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。 我们做所有的画之情需要一个画布，html的...
Html5基于Canvas画一个动态时钟
qq_35543489的博客
02-03 1403
文章目录前言一、前期准备二、绘制刻度1.流程2.效果图三、绘制文字1.流程2.效果图四、绘制指针1.取得当前时间2.绘制秒针3.绘制分针4.绘制时针5.效果图五、绘制圆心1.流程2.效果图六、让钟表动起来总结 前言 Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形。 一、前期.
html5 canvas创意个性圆形时钟代码.zip
09-26
3. **绘制圆形时钟**：使用`arc()`函数绘制时钟的圆盘和指针。`arc(x, y, radius, startAngle, endAngle, anticlockwise)`参数分别表示圆心的x和y坐标，半径，起始角度，结束角度，以及是否逆时针方向。 4. **动画...
HTML5 Canvas水里数字时钟特效.zip
最新发布
11-02
开发者可以研究这个项目来学习如何用Canvas绘制动态图形，如何结合jQuery制作动画，以及如何使用CSS增强视觉表现。同时，这个案例也展示了现代网页开发中技术融合的魅力，对于提升开发者的技术水平和创新能力...
HTML5 Canvas创意个性化时钟动画特效.zip
09-26
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的视觉效果。在这个"HTML5 Canvas创意个性...不仅可以直接使用这个时钟特效，还能作为参考，学习如何实现自己的Canvas动画。
HTML5 Canvas水里数字时钟动画特效.zip
09-26
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行图形绘制，创造出丰富的交互式用户体验。...对于学习者来说，这是一个了解和实践Canvas动画，以及如何与jQuery结合使用的良好案例。
HTML5 Canvas爱心组成的数字时钟代码.zip
09-26
4. **绘制时钟**：每秒更新一次时间，使用`setInterval`函数定期调用绘制函数。首先，获取当前时间（小时、分钟和秒），然后计算每个指针的位置。爱心数字时钟可能使用多个爱心来表示小时、分钟和秒。 - **小时...
html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
weixin_29268385的博客
06-03 765
插件描述：thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作，模拟现实生活中的时钟。并且它还具有定时闹钟的功能。使用该模拟时钟插件首先需要引入jQuery和jquery.thooClock.js文件。可以使用一个空的来作为时钟的容器。在页面DOM元素加载完毕之后，可以通过thooClock()方法来初始化该...
利用H5的canvas画一个时钟
m0_57923701的博客
12-25 1004
用canvas画一个钟表
【前端html/js】使用canvas实现实时时钟
飛之宇
01-08 653
【前端html/js】使用canvas实现实时时钟及贴图版
canvas绘制精细走动时钟
小圣贤君的博客
11-16 5326
这里简单了利用canvas做了一个时钟，能够实现分针和时针较精确的走动，没有太多难点，重点的是要实现分针和时针走动，角度的计算，笔者在下面进行说明。先看效果图： 颜色单配的比较难看，读者谅解。请看代码：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
使用canvas绘制时钟
timeless的博客
08-19 1227
canvas * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; background-color: #DDFFF8;
基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js
781193278专栏
01-09 7514
描述：是一款轻量级的响应式 Tab 选项卡/手风琴jQuery插件，默认为水平/垂直Tab选项卡样式。 使用方法： 1）下载easyResponsiveTabs.js插件 2）引入js文件 fullPageDemo 3）引入自定义CSS样式文件 4）HTML页面 <div
基于jQuery的响应式旋转木马插件flexisel.js
781193278专栏
01-07 4218
描述：flexisel.js响应适应屏幕宽度旋转木马插件，效果很好。它设置为启用自动播放，定义动画的速度和悬停。 特点： 1）Flexisel 将顺应需求适应屏幕宽度变小； 2）根据项目的数量可以更改显示的屏幕宽度； 3）其他选项包括自动播放，动画速度时右和左。 使用方法： 1）下载flexisel.js插件 2）引入js文件 fullPageDemo
基于jQuery的内容滚动插件flexSlider.js
781193278专栏
01-08 2437
描述：轻松创建各种图片轮播效果、焦点图效果、图文混排滚动效果。 特性： 1）支持滑动和淡入淡出效果； 2）支持水平、垂直方向滑动； 3）支持键盘方向键控制； 4）支持触控滑动； 5）支持图文混排，支持各种html元素； 6）自适应屏幕尺寸； 7）可控制滑动单元个数； 8）更多选项设置和回调函数。 使用方法： 1）下载flexisel.js插件 2）引入js文件
Canvas图片模糊效果（学习笔记）
781193278专栏
02-15 2407
Canvas图片模糊效果学习视频：http://www.imooc.com/learn/601 Demo和学习笔记 index.html canvas玩儿转红包照片 <!-- 手机端适配 --> <meta name="viewport" content="height=device-height, width=device-width,
实现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文件中运行，就可以看到时钟的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值