利用H5api实现时钟的绘制(javascript)_JavaScript

利用H5api实现时钟的绘制(javascript)

2021-09-27 12:11weixin_44359232 JavaScript

这篇文章主要为大家详细介绍了利用H5api实现时钟的绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

HTML5的canvas标签用于绘制图像（通过脚本，通常是 JavaScript）。不过，canvas元素本身并没有绘制能力（它仅仅是图形的容器）必须使用脚本来完成实际的绘图任务。

下面，具体总结了一下使用画布canvas的步骤：

画布：

canvas

在页面上规划出一块空间，canvas标签，通过javascript控制画布完成绘制

1.获取画布

				?

									var canvas=document.getElementById("");

2.获取上下文对象（获取画笔）

				?

									var cx=canvas.getContext(“2d”);

3.设置画笔样式

				?

									cx.fillStyle=‘red';

									cx.strokeStyle=‘blue';

4.开始绘制

下面是对于canvas使用，绘制一个简单钟表的小例子：

				?

									<!DOCTYPE html>

									<html lang="en">

									<head>

									 <meta charset="UTF-8">

									 <meta name="viewport" content="width=device-width, initial-scale=1.0">

									 <title>Document</title>

									 <script>

									 window.onload=function(){

									  //1.获取画布

									  var canvas=document.getElementById("canvas");

									  //2.获取画笔

									  var cx=canvas.getContext("2d");

									  function clock(){

									  //3.设置画笔样式

									  cx.fillStyle="orange";

									  //4.绘制图形

									  //绘制表盘

									  cx.beginPath();

									  cx.arc(300,300,200,0,Math.PI*2)

									  cx.closePath();

									  cx.fill();

									  //绘制时刻度

									  cx.lineWidth=2;

									  cx.strokeStyle="black";

									  for(var i=0;i<12;i++){

									   cx.save();

									   cx.translate(300,300);

									   cx.rotate(i*(Math.PI/6));

									   // cx.beginPath();

									   cx.moveTo(0,-180);

									   cx.lineTo(0,-200);

									   // cx.closePath();

									   cx.stroke();

									   cx.fillStyle="black";

									   cx.font="16px blod";

									   cx.rotate(Math.PI/6)

									   cx.fillText(i+1,-5,-220);

									   cx.restore();

									  }

									  //绘制分刻度

									  for(var i=0;i<60;i++){

									   cx.save();

									   cx.translate(300,300);

									   cx.rotate(i*(Math.PI/30));

									   cx.beginPath();

									   cx.moveTo(0,-190);

									   cx.lineTo(0,-200);

									   cx.closePath();

									   cx.stroke();

									   cx.restore();

									  }

									  //获取当前时间

									  var today=new Date();

									  var hour=today.getHours();

									  var min=today.getMinutes();

									  var sec=today.getSeconds();

									  hour=hour+min/60;

									  //绘制时针

									  cx.lineWidth=5;

									  cx.save();

									  cx.beginPath();

									  cx.translate(300,300);

									  cx.rotate(hour*(Math.PI/6));

									  cx.moveTo(0,10);

									  cx.lineTo(0,-100);

									  cx.closePath();

									  cx.stroke();

									  cx.restore();

									  //绘制分针

									  cx.lineWidth=3;

									  cx.save();

									  cx.beginPath();

									  cx.translate(300,300);

									  cx.rotate(min*(Math.PI/30));

									  cx.moveTo(0,10);

									  cx.lineTo(0,-120);

									  cx.closePath();

									  cx.stroke();

									  cx.restore();

									  //绘制秒针

									  cx.lineWidth=1;

									  cx.strokeStyle="red";

									  cx.save();

									  cx.beginPath();

									  cx.translate(300,300);

									  cx.rotate(sec*(Math.PI/30));

									  cx.moveTo(0,10);

									  cx.lineTo(0,-160);

									  cx.closePath();

									  cx.stroke();

									  cx.restore();

									  //绘制交叉处

									  cx.fillStyle="#ccc";

									  cx.strokeStyle="red";

									  cx.save();

									  cx.translate(300,300);

									  cx.beginPath();

									  cx.arc(0,0,5,0,Math.PI*2);

									  cx.closePath();

									  cx.fill();

									  cx.stroke();

									  cx.restore();

									   setTimeout(clock,1000);

									  }

									  clock()

									 }

									 </script>

									</head>

									<body>

									 <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>

									</body>

									</html>