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 のこと)

推薦する

実行中のDockerコンテナのポートマッピングを変更する方法

序文docker run がコンテナを作成して実行するときに、-p を使用してポート マッピング ル...

純粋な CSS3+DIV で小さな三角形の境界線効果を実現するためのサンプル コード

具体的なコードは次のとおりです。 HTMLコードは次のとおりです <div class=&qu...

CSS3 のカラー値 RGBA とグラデーションカラーの使用方法の紹介

CSS3以前は、グラデーション画像は背景画像としてのみ使用できました。 CSS3 のグラデーション構...

表面的なウェブデザイン

<br />私はいつもYahooのウェブデザインが素晴らしいと信じてきました。しかし、こ...

CSS でより美しいリンクプロンプト効果をカスタマイズする方法

提案: コードをできるだけ手書きすると、学習の効率と深さを効果的に向上できます。デフォルトでは、&l...

jsを使用してシンプルな弾幕スクリーンシステムを実装する

この記事では、弾幕効果を実現するためのネイティブjsの具体的なコードを参考までに共有します。具体的な...

幅と高さが可変の要素を中央に配置するための CSS ソリューション

1. 水平中央公開コード: html: <div class="parent&quo...

innerHTML を理解する

<br />関連記事: innerHTML HTML DOM insertRow() メ...

MySQL クエリ データベース容量方法手順

すべてのデータベースの合計サイズを照会する方法は次のとおりです。 mysql> informa...

Springboot プロジェクトに動的にパラメータを渡すための Docker の実装方法

背景最近、Docker 初心者の友人から、毎回プロジェクト構成ファイルにハードコーディングしてサービ...

JavaScript の便利な配列トリック 12 選

目次アレイ重複排除1. from() を新しい Set() メソッドに重ねる2. スプレッド演算子 ...

Nodejs と Socket.IO を組み合わせて Websocket の即時通信を実現

目次WebSocketを使用する理由ソケット.ioオープンソースプロジェクト効果プレビューアプリイン...

VMware Workstationはデバイス/資格情報ガードと互換性がありません

仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...

Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...

Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...