HTML5+JS-Beispielcode-Sharing zum Zeichnen eines Meteorschauers

Meteorschauer...

Freunde, die mit HTML5 vertraut sind, sollten wissen, dass HTML5 mächtig ist Zeichnungs- und Rendering-Fähigkeiten, die Verwendung von HTML5 mit js ist sogar besser als SVG und andere Technologien, und der HTML5-Grafikentwicklungsprozess ist auch relativ einfach. Das Zeichnen dynamischer Grafiken gilt als Animation. Natürlich kann es mit Flash implementiert werden, erfordert jedoch Plug-in-Unterstützung. Im Folgenden finden Sie eine kurze Einführung in den Prozess des Schreibens von Animationen in HTML5.

Zunächst einmal: Lasst uns nicht zuerst über technische Dinge reden, sondern über Technologie und Kunst. Ich denke, dass diejenigen, die über gute Fähigkeiten verfügen, denen es aber an künstlerischer Kreativität im IT-Bereich mangelt, gute Mitarbeiter sind, und nur diejenigen mit bestimmten künstlerischen und kreativen Fähigkeiten können technologische Durchbrüche erzielen. Denn Technologie kann immer durch Übung und Anhäufung erreicht werden, aber Kunst entsteht aus persönlicher Weltanschauung und Ästhetik, die nicht ersetzt und erlernt werden kann. Deshalb warnen uns unsere Professoren oft davor, immer technische Bücher zu lesen, mehr zu lesen, Bücher anzuhören und Lehren daraus zu ziehen Lehrer für Architektur, Ästhetik und Philosophie. Jobs dürfte ein gutes Beispiel sein. Sein iPad und iPhone sind eine Kombination aus Technologie und Kunst. Diese Art von Kreativität ist für andere IT-Unternehmen schwer zu kopieren.

Es gibt viel zu sagen, aber ich denke, es ist wichtiger. Lehrer sagen oft: Wer heute ein Unternehmen gründen und im IT-Bereich bestehen will, braucht ein Konzept und Kreativität, die nicht von anderen kopiert werden können, und nicht nur eine bestimmte Technologie. Sie können in Google Bilder, Bing Bilder und Baidu Bilder nach dem Wort „Javascript“ suchen, und Sie werden in der Lage sein, die Unternehmenslücken zu entdecken, die von Algorithmen bis hin zu großen kulturellen Unterschieden reichen … und Sie werden auch sehen können, warum Google ist ein Riese geworden.

Allerdings muss jeder Fotos oder tatsächliche Szenen von Meteoriten gesehen haben, aber wie zeichnet man ein Bild? Manchmal lassen sich scheinbar alltägliche Dinge nur schwer sorgfältig analysieren, was eine sorgfältige Beobachtung erfordert. Kennen Sie beispielsweise die Anzahl der Stufen vom Erdgeschoss Ihres Bürogebäudes oder Ihrer Wohnung bis zu Ihrem Büro oder Ihrer Wohnung? Meteore sind kleine Meteoriten, die in die Atmosphäre fallen und verglühen. Der Kopf sollte daher hell sein und der Schwanz sollte Restlicht haben. Wenn Sie ihn bunter gestalten möchten, können Sie in der Mitte etwas Farbe hinzufügen. Auf diese Weise entsteht das Modell des Meteors.

Zweitens zurück zum Thema dieses Artikels: Reden wir über technische Dinge!

Objektorientierte Technologie wird häufig für allgemeine Dinge verwendet. Für objektorientierte js können Sie sich auf meinen „HTML5 Application-Happy Birthday Animation Star“ beziehen, der einige kurz vorstellt. Jede bestimmte Sache hat Attribute wie den Namen, das Alter usw. einer Person. Daher haben Meteore grundlegende Eigenschaften wie Geschwindigkeit, Farbe, Länge usw.

Zum Beispiel die von mir definierten Attribute

    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 = "";  //流星的色彩

Die Existenz einer Sache erfordert immer ein Verhalten, und zwar dieses Verhalten ist eine objektorientierte Methode. Beispielsweise muss der Meteor seine Position ändern und sich selbst zeichnen

Beispielsweise erhält der Meteor eine zufällige Farbe, nämlich die Farbe des Mittelteils, und der Kopf muss weiß sein

/**************获取随机颜色函数*****************/
    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";
    }

Dann müssen Sie während der Bewegung Ihre eigenen Koordinaten aktualisieren

 /***************重新计算流星坐标的函数******************/
    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; //假设流星的速度
    }

und Sie müssen sich ständig selbst zeichnen

 /****绘制单个流星***************************/
    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();
    }

Initialisieren Sie, wenn Sie geboren werden

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

Solch ein vollständiges Meteorobjekt ist fertig

Schließlich müssen viele Meteore dies tun erstellt und in geordneter Weise bewegt werden

Sie müssen also das Array zum Speichern von Sternen definieren,

var Meteors = new Array(); //Die Anzahl der Meteore
var MeteorCount = 1; //Die Anzahl der Meteore

Verwenden Sie einfach die Funktion setInterval() von js, um den Timer so einzustellen, dass er kontinuierlich aktualisiert wird.

 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();
        }
    }
}
/***************************************************************************/

 

Das obige ist der detaillierte Inhalt vonHTML5+JS-Beispielcode-Sharing zum Zeichnen eines Meteorschauers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!