返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

用HTML5的canvas实现一个炫酷时钟效果

2019-01-28 14:50:36于海丽

对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用canvas来做一个小小的时钟。

那么首先在这个页面里面我使用了两个canvas，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位让他们重合到一起。然后这里没什么好说的，下面附上代码。

JavaScript Code复制内容到剪贴板
  1. <canvas id="plate">            画表盘   
  2. </canvas>    <canvas id="needles">   
  3.         画时针    </canvas>  
JavaScript Code复制内容到剪贴板
  1. var plate=document.getElementById('plate');    var needles=document.getElementById('needles');   
  2. needles.setAttribute('style','position:absolute;top:8px;left:8px;');  //这里因为chrome里面，body的magin值为8px，所以我这里就没设为0了。    var cntP=plate.getContext('2d');   
  3. var cntH=needles.getContext('2d');    plate.width=800;   
  4. plate.height=500;    needles.width=800;   
  5. needles.height=500;  

到了这里准备工作就做完了，下面就准备绘制时钟了。我先定义了一个绘制时钟表盘的构造函数。

JavaScript Code复制内容到剪贴板
  1. function drawclock(cnt,radius,platelen,linewidth,numLen,NUMLEN){                this.cnt=cnt;   
  2.             this.radius=radius;                this.platelen=platelen;   
  3.             this.linewidth=linewidth;                this.numLen=numLen;   
  4.             this.NUMLEN=NUMLEN;                this.getCalibCoor=function(i){     
  5.                 //获得表盘刻度两端的坐标                    var X=200+this.radius*Math.sin(6*i*Math.PI/180);   
相关文章 大家在看