JavaScript キャンバスでカラフルな太陽のハロー効果を実現

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スクリプト>
        window.onload = 関数(){
            var キャンバス = document.getElementById('キャンバス');
            var cx = canvas.getContext("2d");
            cx.fillStyle='ピンク';
            cx.strokeStyle='ピンク';
            (var i=0;i<10;i++){
                var g = cx.createLinearGradient(0,0,290,290);
                g.addColorStop(0,'rgba(255,0,0,1)');
                g.addColorStop(0.1,'rgba(255,0,0,0.5)');
                g.addColorStop(0.2,'rgba(255,165,0,0.4)');
                g.addColorStop(0.4,'rgba(205,255,0,0.5)');
                g.addColorStop(0.6,'rgba(230,145,0,0.5)');
                g.addColorStop(0.8,'rgba(0,127,255,0.5)');
                g.addColorStop(0.9,'rgba(100,200,205,0.9)');
                g.addColorStop(1,'rgba(0,255,255,0.5)');;
                cx.fillStyle = g;
                cx.beginPath();
                cx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                cx.closePath();
                cx.fill();
            }
        }
    </スクリプト>
</head>
<本文>
    <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>
    
</本文>
</html>

効果図は以下のとおりです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • カラフルな時計効果を実現する JavaScript キャンバス

<<:  MySQL 5.7.18 MSI インストール グラフィック チュートリアル

>>:  Docker コマンドラインの完全ガイド (知っておくべき 18 のこと)

推薦する

Centos8 に nginx1.9.1 をインストールする詳細な手順

1.17.9 本当はもっと美味しいNginx のダウンロード アドレス: https://nginx...

uniapp 要素ノードスタイルの動的変更の詳細な説明

目次1. スタイル属性をバインドして変更するhtml:対応するjs:達成された効果:次に、refを使...

nginx を https をサポートするように設定するためのサンプル コード

1. はじめにあなたのウェブサイトはまだインターネット上に公開されたままですか?ここでは、HTTPS...

Centos は chrony 時間同期サーバー プロセス図を構築します

私の環境: 3 centos7.5 1804マスター 192.168.100.140ノード1 192...

純粋な CSS3 でペットの鶏のサンプルコードを実現

最近、CSS3に関する知識や記事をたくさん読んできましたが、CSS3はとても便利に使えると思います。...

JavaScript ベースの Web 計算機の実装

この記事では、ウェブ計算機のマインスイーパゲームを実装するためのJavaScriptの具体的なコード...

js を使ってシンプルな虫眼鏡効果を実現

この記事の例では、参考までに簡単な虫眼鏡効果を実現するためのjsの具体的なコードを共有しています。具...

Dockerコンテナのホスト間マルチネットワークセグメント通信ソリューションの詳細説明

1. マックヴラン前回のブログ投稿で紹介した Docker コンテナのホスト間通信を実現するための ...

MySQL でタイムスタンプを日付に変換する例

序文職場で次のような状況に遭遇しました。ログ システムのテーブルでは、時間フィールドには日付データで...

リモート Linux システムでポートが開いているかどうかを確認する 3 つの方法

これは、Linux 管理者だけでなく、私たち全員にとって非常に重要なトピックです。つまり、IT イン...

設定ファイルを書いてMyBatisを簡単に使う方法

設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...

GDBデバッグMySQL実戦ソースコードコンパイルとインストール

ソースコードをダウンロード git クローン https://github.com/mysql/my...

Debian システムでの自動パッケージ更新の問題を解決する方法

いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...

webpack-dev-server のコア概念とケースの詳細な説明

webpack-dev-server コアコンセプトWebpack の ContentBase と ...

MySQL データベースの最適化: インデックスの実装原則と使用状況の分析

この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...