html5画布操作的简单学习-简单时钟

最新推荐文章于 2022-10-14 15:24:55 发布

愤豆

最新推荐文章于 2022-10-14 15:24:55 发布

阅读量3.2k

点赞数

本文链接：https://blog.csdn.net/as375256234/article/details/41908519

版权

html5画布操作的简单学习-简单时针

效果图

一.什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

二.本次学习html5的canvas的简单函数

getContext(style)-----------获取canvas画图操作对象，style为样式参数，二维空间2d，三维空间3d

moveTo(x,y)-----------------移动操作

lineTo（x,y）-----------------画直线

translate（x,y）-------------设置坐标轴的原点

rotate（arc）----------------坐标的旋转，arc为弧度，弧度=角度*π/180;

store()------------------------展现画布

clearRect(x1,y1,x2,y2)-----清除长方形的画布，x1，y1为长方形的起点，x2,y2为长方形的起点对角线的点

三、画时钟步骤

1.新建文件clock.html,文件内容如下，以后步骤的代码都现在script标签中填写

<!doctype html>
<html>
<head></head>
<body>
<center>
<canvas id="clock" width="500" height="500">浏览器不支持画布操作</canvas>
</center>
<script>

</script>
</body>
</html>

2.获取画布操作二维空间的操作

var clock=document.getElementById("clock");
var ctx=clock.getContext("2d");

3.画时钟边界--表盘

定义目前画时钟的时间

时钟时间：3点30分45秒

var hour=3;

var min=30;

var sec=45;

//画表盘
ctx.lineWidth=10;
ctx.strokeStyle="blue";
ctx.beginPath();
ctx.arc(250,250,200,0,360,false);
ctx.closePath();
ctx.stroke();

4.画时钟的时刻度

for(var i=0;i<12;i++){
ctx.save();
ctx.lineWidth=7;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(i*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-190);
ctx.lineTo(0,-170);
ctx.closePath();
ctx.stroke();
ctx.restore();
}

5画时钟的分或秒的刻度

//画分钟刻度
for(var i=0;i<60;i++){
ctx.save();
ctx.lineWidth=5;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(i*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-190);
ctx.lineTo(0,-180)
ctx.closePath();
ctx.stroke();
ctx.restore();
}

6、画时针

//画时针
ctx.save();
ctx.lineWidth=10;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(hour*30*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-120);
ctx.lineTo(0,10);
ctx.closePath();
ctx.stroke();
ctx.restore();

7、画分针

//画分针
ctx.save();
ctx.lineWidth=7;
ctx.strokeStyle="#000";
ctx.translate(250,250);
ctx.rotate(min*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-150);
ctx.lineTo(0,15);
ctx.closePath();
ctx.stroke();
ctx.restore();

8.画秒针

//画秒针
ctx.save();
ctx.lineWidth=5;
ctx.strokeStyle="red";
ctx.translate(250,250);
ctx.rotate(sec*6*Math.PI/180);
ctx.beginPath();
ctx.moveTo(0,-160);
ctx.lineTo(0,20);
ctx.closePath();
ctx.stroke();
ctx.restore();

好了经过上述一个固定时间的时钟已经画好了，但是时间从来都不会停止的，所以还是不符合业务吧，那现在就通过setInterval循环运行函数来实现走动的时钟

setinterval（'代码','间隔时间（单位毫秒）'）；将上述步骤的代码用函数drawClock封装起来，每秒钟实现一次setInterval(drawClock,1000);

时间的变量的赋值

var nowDate=new Date();

var hour=nowDate.getHours();
var min=nowDate.getMinutes();
var sec=nowDate.getSeconds();
hour=hour>12?hour-12:hour;

运行起来，秒针会动了，但是有痕迹在，需要用clearRect清除画布后，在全部重新画。

整体代码如下

<!doctype html>
<html>
<head></head>
<body>
<center>
  <canvas id="clock" width="500" height="500">浏览器不支持画布操作</canvas>
</center>
<script>
var clock=document.getElementById("clock");
var ctx=clock.getContext("2d");
function drawClock(){
	//清屏
	ctx.clearRect(0,0,500,500);
	var nowDate=new Date();
	var hour=nowDate.getHours();
	var min=nowDate.getMinutes();
	var sec=nowDate.getSeconds();
	hour=hour>12?hour-12:hour;
	//画表盘
	ctx.lineWidth=10;
	ctx.strokeStyle="blue";
	ctx.beginPath();
	ctx.arc(250,250,200,0,360,false);
	ctx.closePath();
	ctx.stroke();
	//画时针刻度
	for(var i=0;i<12;i++){
	   ctx.save();
	   ctx.lineWidth=7;
	   ctx.strokeStyle="#000";
	   ctx.translate(250,250);
	   ctx.rotate(i*30*Math.PI/180);
	   ctx.beginPath();
	   ctx.moveTo(0,-190);
	   ctx.lineTo(0,-170);
	   ctx.closePath();
	   ctx.stroke();
	   ctx.restore();
	}
	//画分钟刻度
	for(var i=0;i<60;i++){
	   ctx.save();
	   ctx.lineWidth=5;
	   ctx.strokeStyle="#000";
	   ctx.translate(250,250);
	   ctx.rotate(i*6*Math.PI/180);
	   ctx.beginPath();
	   ctx.moveTo(0,-190);
	   ctx.lineTo(0,-180)
	   ctx.closePath();
	   ctx.stroke();
	   ctx.restore();
	   
	}
	//画时针
	ctx.save();
	ctx.lineWidth=10;
	ctx.strokeStyle="#000";
	ctx.translate(250,250);
	ctx.rotate(hour*30*Math.PI/180);
	ctx.beginPath();
	ctx.moveTo(0,-120);
	ctx.lineTo(0,10);
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
	//画分针
	ctx.save();
	ctx.lineWidth=7;
	ctx.strokeStyle="#000";
	ctx.translate(250,250);
	ctx.rotate(min*6*Math.PI/180);
	ctx.beginPath();
	ctx.moveTo(0,-150);
	ctx.lineTo(0,15);
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
	//画秒针
	ctx.save();
	ctx.lineWidth=5;
	ctx.strokeStyle="red";
	ctx.translate(250,250);
	ctx.rotate(sec*6*Math.PI/180);
	ctx.beginPath();
	ctx.moveTo(0,-160);
	ctx.lineTo(0,20);
	ctx.closePath();
	ctx.stroke();
	ctx.restore();
}
drawClock();
setInterval(drawClock,1000);
</script>
</body>
</html>

愤豆

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5画布操作的简单学习-简单时钟

html5画布操作的简单学习-简单时针一.什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。二.本次学习html5的canvas的简单函数getContext(style)-----
复制链接

扫一扫