炫酷的canvas

来源：互联网发布：网络推广软件哪家好编辑：程序博客网时间：2024/05/16 06:56

最近做的项目里面有涉及到canvas，虽然之前有学习过canvas，不过好久没使用，慢慢有些生疏了。下面就来说说canvas的一些基本功能，以及最后完成的一个炫酷小demo，虽然难度不大，不过比较有趣，既熟悉了canvas，又得到了很多乐趣，何乐而不为呢。

首先我们需要在html里面写一对canvas标签，id为canvas

<canvas id="canvas" style="display:block;margin:50px auto;">    当前浏览器不支持Canvas，请更换浏览器再打开</canvas>

canvas标签内的文字，在支持canvas画布的浏览器中不会显示，如果浏览器不支持canvas，就会做出简单的提示，当然我们也可以在js中进行判断。另外，canvas的宽和高最好不要在css中进行设置，可以写成内联样式，也可以在js中进行定义，这里我们在js中定义。

有了canvas标签，我们就可以在js中获取canvas和context对象了，代码如下

var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");

这样我们就可以通过context对象，在canvas画布上进行图像绘制了。

下面来说说我们的炫酷小demo，是一个通过canvas绘制的小球组成的倒计时时钟，还有一些动画效果

首先我们创建一个名为click.js的文件，在html先引入click.js文件，该文件为一个三维数组，用一个数组来存放几个二维数字矩阵，这几个矩阵对应数字0到9，还有一个冒号，如下

//绘制数字的三维数组矩阵,var digit=[    [        [0,0,1,1,1,0,0],        [0,1,1,0,1,1,0],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [0,1,1,0,1,1,0],        [0,0,1,1,1,0,0]    ],//0的二维数组点阵    [        [0,0,0,1,1,0,0],        [0,1,1,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [1,1,1,1,1,1,1]    ],//1    [        [0,1,1,1,1,1,0],        [1,1,0,0,0,1,1],        [0,0,0,0,0,1,1],        [0,0,0,0,1,1,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,1,1,0,0,0],        [0,1,1,0,0,0,0],        [1,1,0,0,0,1,1],        [1,1,1,1,1,1,1]    ],//2    [        [1,1,1,1,1,1,1],        [0,0,0,0,0,1,1],        [0,0,0,0,1,1,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,0,0,1,1,0],        [0,0,0,0,0,1,1],        [0,0,0,0,0,1,1],        [1,1,0,0,0,1,1],        [0,1,1,1,1,1,0]    ],//3    [        [0,0,0,0,1,1,0],        [0,0,0,1,1,1,0],        [0,0,1,1,1,1,0],        [0,1,1,0,1,1,0],        [1,1,0,0,1,1,0],        [1,1,1,1,1,1,1],        [0,0,0,0,1,1,0],        [0,0,0,0,1,1,0],        [0,0,0,0,1,1,0],        [0,0,0,1,1,1,1]    ],//4    [        [1,1,1,1,1,1,1],        [1,1,0,0,0,0,0],        [1,1,0,0,0,0,0],        [1,1,1,1,1,1,0],        [0,0,0,0,0,1,1],        [0,0,0,0,0,1,1],        [0,0,0,0,0,1,1],        [0,0,0,0,0,1,1],        [1,1,0,0,0,1,1],        [0,1,1,1,1,1,0]    ],//5    [        [0,0,0,0,1,1,0],        [0,0,1,1,0,0,0],        [0,1,1,0,0,0,0],        [1,1,0,0,0,0,0],        [1,1,0,1,1,1,0],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [0,1,1,1,1,1,0]    ],//6    [        [1,1,1,1,1,1,1],        [1,1,0,0,0,1,1],        [0,0,0,0,1,1,0],        [0,0,0,0,1,1,0],        [0,0,0,1,1,0,0],        [0,0,0,1,1,0,0],        [0,0,1,1,0,0,0],        [0,0,1,1,0,0,0],        [0,0,1,1,0,0,0],        [0,0,1,1,0,0,0]    ],//7    [        [0,1,1,1,1,1,0],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [0,1,1,1,1,1,0],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [0,1,1,1,1,1,0]    ],//8    [        [0,1,1,1,1,1,0],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [1,1,0,0,0,1,1],        [0,1,1,1,0,1,1],        [0,0,0,0,0,1,1],        [0,0,0,0,0,1,1],        [0,0,0,0,1,1,0],        [0,0,0,1,1,0,0],        [0,1,1,0,0,0,0]    ],//9    [        [0,0,0,0],        [0,0,0,0],        [0,1,1,0],        [0,1,1,0],        [0,0,0,0],        [0,0,0,0],        [0,1,1,0],        [0,1,1,0],        [0,0,0,0],        [0,0,0,0]    ]//:];

有了这个数组，我们就可以用canvas绘制时钟了，首先定义一些变量及常量，绘制小球的时候会用到

var WINDOW_WIDTH=1024;    //画布的宽度var WINDOW_HEIGHT=600;    //画布的高度var RADIUS=8;             //小球的半径var MARGIN_TOP=60;        //每一个数字距离画布顶端的距离var MARGIN_LEFT=30;       //第一个数字距离画布左边距的距离                                                                                                            const endTime=new Date(2016,7,4,15,30,00);    //倒计时的截止时间var curShowTimeSeconds=0;  //当前显示的秒数

定义完这些量以后，我们就可以开始写主题函数了

window.onload=function(){    var canvas=document.getElementById("canvas");    var context=canvas.getContext("2d");    canvas.width=WINDOW_WIDTH;    canvas.height=WINDOW_WIDTH;    curShowTimeSeconds=getCurrentShowTimeSeconds();    setInterval(function(){        render(context);        update();    },50)}

其中，getCurrentShowTimeSeconds()函数用来获取当前显示的秒数，render()为负责绘制小球的函数，update()为更新显示的函数，每次改变小球位置重新绘制好后，还要更新显示才可以。

function getCurrentShowTimeSeconds(){    var curTime=new Date();    var ret=endTime.getTime()-curTime.getTime();   //设定的截止时间与当前时间的毫秒数差值    ret=Math.round(ret/1000);    return ret>=0?ret:0;}

function update(){    //更新显示的时间,产生时间变化的动画    var nextShowTimeSeconds=getCurrentShowTimeSeconds();    var nextHours=parseInt(nextShowTimeSeconds/3600);    var nextMinutes=parseInt((nextShowTimeSeconds-nextHours*3600)/60);    var nextSeconds=nextShowTimeSeconds%60;    var curHours=parseInt(curShowTimeSeconds/3600);    var curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);    var curSeconds=curShowTimeSeconds%60;    //只比较秒即可，因为每50毫秒就比较一次    if(nextSeconds!=curSeconds){        curShowTimeSeconds=nextShowTimeSeconds;    }}

function render(cxt){    //每一次更新画面，都要先清除画布，否则会叠加    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);    var hours=parseInt(curShowTimeSeconds/3600);    var minutes=parseInt((curShowTimeSeconds-hours*3600)/60);    var seconds=curShowTimeSeconds%60;    //绘制数字的函数    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);                          //绘制小时得第一个数字    renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);            //绘制小时的第二个数字,14*(RADIUS+1)为一个数字的宽度    renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);                            //绘制冒号    renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);          //绘制分钟的第一个数字    renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);          //绘制分钟的第二个数字    renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);                            //绘制冒号    renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);          //绘制秒钟的第一个数字    renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);         //绘制秒钟的第二个数字}

在上面的render()函数中，又用到了renderDigit()方法，这个方法负责绘制一个数字或者冒号，需要传入四个参数，第一个参数为绘制起点的x坐标，第二个参数为y坐标，第三个参数为要绘制的图形，0到9代表各自的数字，10代表冒号。第四个参数为context对象，renderDigit()函数如下：

function renderDigit(x,y,num,cxt){    cxt.fillStyle="rgb(0,102,153)";    //两重循环遍历二位数组，值为1的地方就绘制一个圆形    for(var i=0;i<digit[num].length;i++){        for(var j=0;j<digit[num][i].length;j++){            if(digit[num][i][j]==1){                cxt.beginPath();                cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);                cxt.closePath();                cxt.fill();            }        }    }}

至此我们就完成了用canvas绘制一个简单倒计时时钟的逻辑，只需将上述代码放在一起即可，完成后的效果如下图

1 0