HTML5+JS sample code sharing for drawing meteor shower

Meteor shower...

Friends who are familiar with HTML5 should know that HTML5 has powerful drawing and rendering Ability, the use of HTML5 with js is even better than svg and other technologies, and the HTML5 graphics development process is also relatively simple. Drawing dynamic graphics is considered animation. Of course, it can be implemented using Flash, but it requires plug-in support. The following is a brief introduction to the process of writing animations in HTML5.

First of all: Let’s not talk about technical things first, let’s talk about technology and art. I think those who have good skills but lack artistic creativity in the IT field are good employees, which is harshly called code workers; only those with certain artistic and creative abilities can achieve technological breakthroughs. Because technology can always be achieved through practice and accumulation, but art comes from personal worldview and aesthetics, which cannot be replaced and learned. Therefore, our professors often warn us not to always read technical books, read more, Listen to books and lessons from teachers of architecture, aesthetics and philosophy. Jobs should be a good example. His iPad and iPhone are a combination of technology and art. This kind of creativity is difficult to be copied by other IT companies.

There’s a lot to say, but I think it’s more important. Teachers often say that if you want to start a business and survive in the IT field today, you need a concept and creativity that cannot be copied by others, not just a certain technology. You can search for the word "javascript" in Google Images, Bing Images, and Baidu Images, and you will be able to find differences between companies ranging from algorithms to large cultural differences... and you will also be able to see why Google has become a giant.

Having said that, everyone must have seen photos or actual scenes of meteors, but how to outline them? Sometimes things that seem common are really difficult to analyze carefully, which requires careful observation. For example, do you know the number of steps from the ground floor of your office building or residence to your office or apartment? Meteors are small meteorites that fall into the atmosphere and burn. Therefore, the head should be bright and the tail should have residual light. If you want to make it more colorful, you can add some color in the middle. In this way, the model of the meteor comes out.

Secondly, back to the topic of this article, let’s talk about technical things!

Object-oriented technology is often used for overall things. For js object-oriented, you can refer to my "HTML5 Application-Happy Birthday Animation Star", which briefly introduces some. Any specific thing has attributes, such as a person's name, age, etc. Therefore, meteors have basic properties such as speed, color, length, etc.

For example, the attributes I defined

    this.x = -1;
    this.y = -1;
    this.length = -1;
    this.width = -1;
    this.speed = -1;
    this.alpha = 1; //透明度
    this.angle = -1; //以上参数分别表示了流星的坐标、速度和长度
    this.color1 = "";
    this.color2 = "";  //流星的色彩

A thing always needs to have some behavior, and this behavior is the object-oriented method . For example, the meteor needs to move its position and draw itself

For example, the meteor gets a random color, which is the color of the middle part, and the head must be white

/**************获取随机颜色函数*****************/
    this.getRandomColor = function () //
    {
        var a = 255 * Math.random(); a = Math.ceil(a);
        var a1 = 255 * Math.random(); a1 = Math.ceil(a1);
        var a2 = 255 * Math.random(); a2 = Math.ceil(a2);
        this.color1 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
        a = 255 * Math.random(); a = Math.ceil(a);
        a1 = 255 * Math.random(); a1 = Math.ceil(a1);
        a2 = 255 * Math.random(); a2 = Math.ceil(a2);
        this.color2 = "rgba(" + a.toString() + "," + a1.toString() + "," + a2.toString() + ",1)";
        //this.color1 = "white";
        this.color2 = "black";
    }

Then the moving process You need toupdateyour own coordinates

 /***************重新计算流星坐标的函数******************/
    this.countPos = function ()//
    {
        this.x = this.x - this.speed * Math.cos(this.angle * 3.14 / 180);
        this.y = this.y + this.speed * Math.sin(this.angle * 3.14 / 180);
    }
    /*****************获取随机坐标的函数*****************/
    this.getPos = function () //
    {
        var x = Math.random() * 1000 + 200;
        this.x = Math.ceil(x);
        x = Math.random() * 200;
        this.y = Math.ceil(x);
        this.width = 5;  //假设流星宽度是15
        x = Math.random() * 80 + 120;
        this.length = Math.ceil(x);
        this.angle = 30; //假设流星倾斜角30
        this.speed = 1; //假设流星的速度
    }

You also need to constantly draw yourself

 /****绘制单个流星***************************/
    this.drawSingleMeteor = function () //绘制一个流星的函数
    {
        cxt.save();
        cxt.beginPath();
        cxt.lineWidth = this.width;
        cxt.globalAlpha = this.alpha; //设置透明度
        var line = cxt.createLinearGradient(this.x, this.y, this.x + this.length * Math.cos(this.angle * 3.14 / 180), 
        this.y - this.length * Math.sin(this.angle * 3.14 / 180)); //创建烟花的横向渐变颜色
        line.addColorStop(0, "white");
        line.addColorStop(0.1, this.color1);
        line.addColorStop(0.6, this.color2);
        cxt.strokeStyle = line;
        cxt.moveTo(this.x, this.y);
        cxt.lineTo(this.x + this.length * Math.cos(this.angle * 3.14 / 180), 
        this.y - this.length * Math.sin(this.angle * 3.14 / 180));
        cxt.closePath();
        cxt.stroke();
        cxt.restore();
    }

Initialize at birth

/****************初始化函数********************/
    this.init = function () //初始化
    {
        this.getPos();
        this.alpha = 1;
        this.getRandomColor();
    }

最后

# So you need to define the array to store the stars,

var Meteors = new Array(); //The number of meteors
var MeteorCount = 1; //Meteors The number

#Just use the setInterval() function of js to set the timer to continuously update.

 MeteorCount = 20;
        for (var i = 0; i < MeteorCount; i++) //;
        {
            Meteors[i] = new meteor(cxt);
            Meteors[i].init();//初始化
        }

/*************演示流星的函数***********************/
function playMeteors() //流星
{
    for (var i = 0; i < MeteorCount; i++) //循环处理
    {
        var w=Meteors[i].speed*Math.cos(Meteors[i].angle*3.14/180);
        var h=Meteors[i].speed*Math.sin(Meteors[i].angle*3.14/180);
        cxt.clearRect(Meteors[i].x+Meteors[i].length*Math.cos(Meteors[i].angle*3.14/180)-6*w,
        Meteors[i].y-Meteors[i].length*Math.sin(Meteors[i].angle*3.14/180)-6*h,10*w,10*h);
        Meteors[i].drawSingleMeteor();
        Meteors[i].countPos();
        Meteors[i].alpha -= 0.002;
        if (Meteors[i].y>320||Meteors[i].alpha<=0.01) //到达下线
        {
            cxt.clearRect(Meteors[i].x - 1, Meteors[i].y - Meteors[i].length * Math.sin(Meteors[i].angle * 3.14 / 180), 
            Meteors[i].length * Math.cos(Meteors[i].angle * 3.14 / 180)+2, 
            Meteors[i].length * Math.sin(Meteors[i].angle * 3.14 / 180)+2);
            Meteors[i] = new meteor(cxt);
            Meteors[i].init();
        }
    }
}
/***************************************************************************/

###

The above is the detailed content of HTML5+JS sample code sharing for drawing meteor shower. For more information, please follow other related articles on the PHP Chinese website!