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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.18 MSI インストール グラフィック チュートリアル
>>: Docker コマンドラインの完全ガイド (知っておくべき 18 のこと)
推薦する
Vue3の状態管理の使用方法の詳細な説明
目次背景提供/注入共有状態の抽出データを提供するデータの挿入まとめ反応的な共有状態の抽出共有状態の使...
コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)
レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...
my.cnf (my.ini) 重要なパラメータの最適化設定手順
MyISAM ストレージエンジンMyISAM ストレージ エンジンは、書き込みよりも読み取りが多く、...
MySQL binlog ログを開く方法
binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...
MySQLデータベースに画像を保存するいくつかの方法
通常、ユーザーがアップロードした写真はデータベースに保存する必要があります。一般的に、解決策は 2 ...
DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロール バーの表示、div の非表示、イベント バブリングの無効化など)
最も一般的に使用されるレイアウト要素として、DIV は Web 開発において重要な役割を果たします。...
Vueの子コンポーネントと親コンポーネントの詳細な分析
目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....
phpstudy から Linux への MySQL の移行に関するチュートリアル
プロジェクトの目的元のWindows環境でphpstudyを使用して構築されたMySQL 5.5.5...
Reactはグローバル箇条書きボックスメソッドをカプセル化します
この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...
CSS の歪んだ影の実装コード
この記事では、CSS ワープ シャドウの実装コードを紹介し、皆さんと共有します。詳細は以下の通りです...
mysql 5.7.5 m15 winx64.zip インストール チュートリアル
win7 64 ビットで mysql-5.7.5-m15-winx64 をインストールして構成する方...
ドロップダウンメニューを実現するためのHTML+CSS
1. ドロップダウンリストの例コードは次のとおりです。 <!doctypehtml> ...
Linux のハードリンクとソフトリンクの区別
Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...
MySQL 外部キー制約の例の説明
MySQL の外部キー制約は、2 つのテーブル間のリンクを確立するために使用されます。 1 つのテー...
Mysql SQL ステートメントのコメント
MySQL SQL ステートメントにコメントを追加できます。MySQL SQL ステートメントのコメ...