HTML5 Application-Happy Birthday Animation - Sample Code Sharing to Realize Stars

Before talking about drawing star animation, let me introduce some javascript knowledge.

Object-oriented: JavaScript is not an object-oriented language in nature, but a scripting language. It is generally only suitable for simple programs with a small amount of code, because scripts that are too complex will directly cause browser exceptions. . But JavaScript still has object-oriented characteristics. For multi-process and multi-object script programs, it is recommended to build objects, so that it is very convenient to maintain, modify and call the script. It is very simple to construct objects in javascript, much simpler than java and c++. For example, constructing a car object:

<pre name="code" class="javascript"><span style="font-size:18px;">var Car=function()//构建车的对象  
{     this.color="red";    
      this.price=100000;    
      this.length=2.5;    
      this.speed=80;   //车的一些属性    
      this.x=0;    
      this.updatePos=function()  //更新车位置的方法    
      {    this.x+=this.speed;    
      }  
}  
</span>

构建好对象之后就可以构建对象了， var mycar=new Car();

setInterval()：这是javascript中的定时器函数，有两个参数，前面是待执行的代码， 后面一个是间隔时间。但是有几点需要注意的问题。

1：假设有一个函数GetPos()需要用定时器执行， 可以setInterval(GetPos,1000)或者setInterval("GetPos()",1000) 如果写成setInterval(GetPos,1000)一般只会执行一次这个函数，我曾经犯过这个错误。

2：在setInterval()中尽量使用全局变量，因为它重复调用，局部变量容易出错。

好了，罗嗦了一会儿，我想大家应该都知道这些的。

这个gif图片中包括了星星对象和文字（后面讲述）对象。 对于绘制星星，应该充分利用五角星的对称性。 在HTML5 canvas对象中，大家最好要灵活使用坐标变换，我把主要的坐标变换函数说一下：

<span style="color:#ff0000;">
<span style="font-size:18px;">save() //保存当前画布状态  
restore()回复画布状态  
translate(x,y) //将画布中心坐标平移至x,y  
rotate(angle) //将画布旋转angle角度  
transform 和setTransform是对画布矩形进行变换的，比较难用</span></span>

现在构建星星对象，星星在天空中需要哪些属性呢？ 一般有坐标、亮度、大小、倾斜角度等，我定义的如下

<span style="font-size:18px;">   this.x = -1;  
    this.y = -1;  //表示横纵坐标  
    this.style = "";  
    this.r = -1;  
    this.scale = 1; //表示缩放倍数  
    this.angle = 0; //旋转的角度  
    this.angle1 = 0; //辅助参数</span>
    

其次需要绘制星星的方法，前面说过需要利用星星的对称性，因此实际上只需要绘制五分之一， 再利用旋转就可以绘制全部的图形了。星星需要填充颜色，HTML5中可以对路径进行填充， 因此可以使用路径beginPath()和closePath(),但是最后记住使用fill()函数填充的。

例如我绘制五分之一图形函数：

<span style="font-size:18px;"> this.drawPartStar = function () //部分  
    {  
        cxt.save();  
        cxt.beginPath();  
        cxt.lineCap = "round"; cxt.lineWidth = 5;  
        cxt.fillStyle = this.style;  
        cxt.translate(this.x, this.y); //位移  
        cxt.rotate(this.angle1);  
        //cxt.globalAlpha = this.alpha; //设置透明度  
        cxt.moveTo(0, 0);  
        var xx = 0 - this.r * Math.sin(36 / 180 * 3.14);  
        var yy = 0 - this.r * Math.cos(36 / 180 * 3.14);  
        cxt.lineTo(xx, yy);  
        xx = 0;  
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14) 
        - this.r * Math.sin(36 / 180 * 3.14) * Math.tan(72 / 180 * 3.14);  
        cxt.lineTo(xx, yy);  
        xx = this.r * Math.sin(36 / 180 * 3.14);  
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14);  
        cxt.lineTo(xx, yy);  
        cxt.lineTo(0, 0);  
        cxt.closePath();  
        cxt.fill();  
        cxt.restore();  
    }</span>

然后利用画布旋转就可以得到整个的图形了

<span style="font-size:18px;">this.drawStar = function () //绘制完整的花  
    {  
        for (var i = 0; i <= 4; i++) {  
            this.angle1 = i * 72 / 180 * 3.14 + this.angle;  
            this.drawPartStar();  
        }  
    }</span>

关于星星的坐标，半径大小，倾斜角度都可以使用随机函数实现，利用实现m到n之间的随机数：

<span style="font-size:18px;">var x=(n-m)*Math.random()+m;</span>

通过合理控制m,n就可以得到需要的值了。

好了，到这里星星对象创建过程结束，其次需要构建这些星星。 由于星星数目多，可以使用数组对象，每一个数组对象都是一个星星对象：

<span style="font-size:18px;"> 
var stars = new Array();   //创建星星对象  
    var starCount = 40; //星星的数目,默认是40   
  
for (var m = 0; m < starCount; m++) //  
    {  
        var s = new star(cxt);  
        s.init();stars[m] = s;  
    }</span>

最后使用定时器，使星星具有闪烁效果：

<span style="font-size:18px;"> 
/***************演示闪烁星星的函数**********************/  
    function playStars() //演示星星  
    {  
        for (var n = 0; n < starCount; n++)  
       {  
        stars[n].getColor();  
        stars[n].drawStar();  
        }  
    }</span>

setInterval("playStars()",500);

这样，闪烁的星星就全部做完了。

以上就是我说的利用对象构建闪烁星星的过程。 大家可以看到利用对象的简便和独立性，希望还不熟悉的朋友可以熟悉这种方法。

最后把star.js中关于星星对象的全部代码写在这里供大家参考

<span style="font-size:18px;">

/******star.js******/  
/****以下是星星的对象**********************************/  
var star = function (cxt) //定义星的对象  
{  
    this.x = -1;  
    this.y = -1;  //表示横纵坐标  
    this.style = "";  
    this.r = -1;  
    this.scale = 1; //表示缩放倍数  
    this.angle = 0; //旋转的角度  
    this.angle1 = 0; //辅助参数  
    this.getPos = function () //获取随机坐标  
    {  
        var xx = 20 + 1200 * Math.random();  
        var yy = 20 + 250 * Math.random();  
        this.x = Math.ceil(xx); this.y = Math.ceil(yy); //获取了随机坐标  
    }  
    this.getAngle = function () //得到随机的角度  
    {  
        this.angle = Math.random() * Math.PI;  
    }  
    this.getR = function () //获取半径  
    {  
        var i = 1 + 4 * Math.random();  
        this.r = Math.ceil(i); //获取随机半径  
    }  
    this.getColor = function () //获取随机颜色  
    {  
        var n = Math.random();  
        if (n < 0.5)  
            this.style = "white";  
        else  
            this.style = "#BBAAB1"; //灰白色  
  
    }  
    this.drawPartStar = function () //部分  
    {  
        cxt.save();  
        cxt.beginPath();  
        cxt.lineCap = "round"; cxt.lineWidth = 5;  
        cxt.fillStyle = this.style;  
        cxt.translate(this.x, this.y); //位移  
        cxt.rotate(this.angle1);  
        //cxt.globalAlpha = this.alpha; //设置透明度  
        cxt.moveTo(0, 0);  
        var xx = 0 - this.r * Math.sin(36 / 180 * 3.14);  
        var yy = 0 - this.r * Math.cos(36 / 180 * 3.14);  
        cxt.lineTo(xx, yy);  
        xx = 0;  
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14) 
        - this.r * Math.sin(36 / 180 * 3.14) * Math.tan(72 / 180 * 3.14);  
        cxt.lineTo(xx, yy);  
        xx = this.r * Math.sin(36 / 180 * 3.14);  
        yy = 0 - this.r * Math.cos(36 / 180 * 3.14);  
        cxt.lineTo(xx, yy);  
        cxt.lineTo(0, 0);  
        cxt.closePath();  
        cxt.fill();  
        cxt.restore();  
    }  
    this.drawStar = function () //绘制完整的花  
    {  
        for (var i = 0; i <= 4; i++) {  
            this.angle1 = i * 72 / 180 * 3.14 + this.angle;  
            this.drawPartStar();  
        }  
    }  
    this.init = function ()  //初始化函数  
    {  
        this.getPos();  
        this.getR();  
        this.getColor();  
        this.getAngle();  
    }  
}  
/*****************以上是星星的对象**************************/</span
>

The above is the detailed content of HTML5 Application-Happy Birthday Animation - Sample Code Sharing to Realize Stars. For more information, please follow other related articles on the PHP Chinese website!