HTLM5绘制钟表技术大揭秘

2019-09-10 郑州网站建设  

首先我们分析需求,在没有任何图片的情况下,我们必须要绘制地盘,刻度,时针,分针以及秒针,并且每秒绘制一次秒针,时

HTML5中使用canvas绘制时钟

针,分针的刻度也同意是有规律可循的,例如时针是分针走360度后时针走30度,也就是121的比例,秒针走360度,分针走6度,也就是601的角度比例,以此我们可以计算任意时刻的时,分,秒的角度值。每秒总的角度比为,时针:分针:秒针 = 112720。需求分析结束后,便可以开始着手绘制我们的表盘了。

首先创建一个canvas.html文件,内容如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>canvas时钟Demo</title>

</head>

<body>

<canvas id="canvas" width="600px" height="600px" style="background-color: #F0F8FF; position:absolute;left: 100px;">该浏览器不支持canvas</canvas>

<script type="text/javascript" src=http://www.divcss5.com/html5/"js/canvas.js" ></script>

</body>

</html>

HTML5中使用canvas绘制时钟

canvas.html

接下来在js文件夹中创建一个canvas.js文件

HTML5中使用canvas绘制时钟

创建canvas.js文件

并将所有的逻辑写到这个js文件中。

首先定义所有的常量,如图所示:

HTML5中使用canvas绘制时钟

绘制中所有使用到的常量

var canvas = null;

var context = null;

var RADIUS = 200; //半径

var POINTX = 300; //原点X

var POINTY = 300; //原点Y

var HOURHANDLEN = 100; //时针长度

var MINUTESHANDLEN = 140; //分针长度

var SECONDHANDLEN = 180; //秒针长度

var HOURHANDWIDTH = 5; //时针宽度

var MINUTESHANDWIDTH = 3; //分针宽度

var SECONDHANDWIDTH = 1; //秒针宽度

var HOURHANDCOLOR = '#FF00FF'; //时针色彩

var MINUTESHANDCOLOR = '#CC10FF'; //分针色彩

var SECONDHANDCOLOR = '#1155BB'; //秒针色彩

创建一个初始化的办法function init(){},用来初始化canvascontext的内容,如果着这里对于context这个中文翻译为上下文的东西还不懂的话可以自行查阅相关文档(最基础的了,不懂就别接下看了,看了也白瞎)。

HTML5中使用canvas绘制时钟

init()初始化办法


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1718.html转载请标明出处,谢谢合作!
标签:
  • 没有
  • 我们
  • 任何
  • HTLM5
  • 首先
  • 分析
  • 需求