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

2019-09-08 郑州网站建设  

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

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

JavaScript Code复制内容到剪贴板

<canvas id="plate">   

        画表盘   

</canvas>   

<canvas id="needles">   

        画时针   

</canvas>  

JavaScript Code复制内容到剪贴板

var plate=document.getElementById('plate');   

var needles=document.getElementById('needles');   

needles.setAttribute('style','position:absolute;top:8px;left:8px;');  //这里因为chrome里面,body的magin值为8px,所以我这里就没设为0了。   

var cntP=plate.getContext('2d');   

var cntH=needles.getContext('2d');   

plate.width=800;   

plate.height=500;   

needles.width=800;   

needles.height=500;  

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

JavaScript Code复制内容到剪贴板

function drawclock(cnt,radius,platelen,linewidth,numLen,NUMLEN){   

            this.cnt=cnt;   

            this.radius=radius;   

            this.platelen=platelen;   

            this.linewidth=linewidth;   

            this.numLen=numLen;   

            this.NUMLEN=NUMLEN;   

            this.getCalibCoor=function(i){     

                //获得表盘刻度两端的坐标   

                var X=200+this.radius*Math.sin(6*i*Math.PI/180);   

                var Y=200-this.radius*Math.cos(6*i*Math.PI/180);   

                var x=200+(this.radius-this.platelen)*Math.sin(6*i*Math.PI/180);   

                var y=200-(this.radius-this.platelen)*Math.cos(6*i*Math.PI/180);   

  

                // 获得分钟数字的坐标   

                var numx=200+(this.radius-this.platelen-this.numLen)*Math.sin(6*i*Math.PI/180);   

                var numy=200-(this.radius-this.platelen-this.numLen)*Math.cos(6*i*Math.PI/180);   

                //获得小时数字的坐标   

                var numX=200+(this.radius-this.platelen-this.NUMLEN)*Math.sin(6*i*Math.PI/180);     


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