流星群描画用のHTML5+JSサンプルコード共有-H5 チュートリアル-php.cn

流星群描画用のHTML5+JSサンプルコード共有

黄舟

リリース： 2017-03-18 15:44:32

オリジナル

4822 人が閲覧しました

️流星群…

開発プロセスも比較的単純です。もちろん、ダイナミックグラフィックスの描画はアニメーションとみなされますが、Flash を使用して実装できますが、プラグインのサポートが必要です。以下に、HTML5 でアニメーションを作成するプロセスを簡単に紹介します。

まず第一に、技術的なことについて話すのではなく、テクノロジーとアートについて話しましょう。 IT 分野では、優れたスキルはあるが芸術的創造性が欠けている人が優れた従業員であると思います。これは、厳密にはコードワーカーと呼ばれますが、特定の芸術的および創造的能力を備えた人だけが技術的なブレークスルーを達成できます。なぜなら、テクノロジーは常に実践と蓄積によって達成できるものですが、芸術は個人の世界観や美学から生まれ、置き換えたり学んだりすることはできません。そのため、教授たちは常に専門書を読んだり、本を読んだり、本や教訓を聞いたりしないようにとよく警告します。建築、美学、哲学の教師。ジョブズ氏の iPad と iPhone は、テクノロジーとアートを組み合わせたものであり、他の IT 企業が真似するのは困難です。

言いたいことはたくさんありますが、それがもっと重要だと思います。先生たちはよく、起業して今のIT分野で生き残っていくには、特定の技術だけではなく、他人には真似できないコンセプトや創造性が必要だと言います。 Google イメージ、Bing イメージ、Baidu イメージで「JavaScript」という単語を検索すると、アルゴリズムから大きな文化に至るまで企業間の違いを見つけることができます...そして、なぜ Google がそうするのかもわかるでしょう巨人になる。

そうは言っても、流星の写真や実際の光景は誰もが見たことがあると思いますが、その概要はどうすればよいでしょうか？一般的に見える事柄でも、慎重に分析するのは非常に難しい場合があり、慎重な観察が必要です。たとえば、オフィスビルまたは住居の 1 階からオフィスまたはアパートまでの歩数を知っていますか?流星は大気圏に落ちて燃える小さな隕石なので、頭は明るく、尾は光が残っている必要があります。よりカラフルにしたい場合は、中央に色を追加します。このようにして流星の模型が出てきます。

次に、この記事の主題に戻り、技術的なことについて話しましょう。

オブジェクト指向技術は全般的によく使われます。js オブジェクト指向については、私の「HTML5 アプリケーション - ハッピーバースデーアニメーションスター」を参照してください。いくつか簡単に紹介しています。特定のものには、人の名前、年齢などの属性があります。したがって、流星には速度、色、長さなどの基本的な特性があります。

たとえば、私が定義したプロパティ

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

ログイン後にコピー

物事が存在するには常に何らかの

動作

が必要であり、この動作はオブジェクト指向メソッドです。たとえば、流星は位置を移動して自分自身を描画する必要があります

たとえば、流星は中央部分の色であるランダムな色を取得し、頭は白でなければなりません

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

ログイン後にコピー

次に、次のことを行う必要があります

移動中に

自身の座標

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

ログイン後にコピー

を更新する

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

ログイン後にコピー

また、誕生時に自分のr

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

ログイン後にコピー

を描画し続ける必要があり、

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

ログイン後にコピー

の初期化が完了し、完全な流星オブジェクトが完了します。

配列

を定義するには、

var Meteors = new Array(); //流星の数var MeteorCount = 1; //流星の数

jsのsetInterval()関数を使用します。タイマーを設定するだけで更新を継続できます。

らぁらぁぁぁぁぁ

以上が流星群描画用のHTML5+JSサンプルコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。