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 のこと)
推薦する
Centos7 から Centos8 へのアップグレードに関するチュートリアル (画像とテキスト付き)
正式な環境でアップグレードする場合は、データと重要な設定をバックアップしてください。アップグレードに...
2015-2016年に主流となるインタラクティブ体験のトレンド
5月の最も重要なインタラクティブデザイン記事！今年、Baiduのデザイナーは体験の観点から出発し、大...
Windows Server 2016 AD サーバーをセットアップする手順 (画像とテキスト)
導入： AD は Active Directory の略称で、中国語では Active Direct...
CSS3 は本当に SCSS に取って代わるのでしょうか?
Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...
Docker を使用してエンタープライズレベルのカスタムイメージを構築する方法
序文退社前に、ある依頼を受けました。基本イメージ規格の変更により、最新の Docker イメージ規格...
docker を使用して Spring Boot をデプロイし、Skywalking に接続する方法
目次1. 概要1. スカイウォーキング入門2. スカイウォーキング建築3. スカイウォーキングはどの...
CentOS プラットフォーム上で LAMP 環境を素早く構築する方法
この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...
Linux の 5 ステップ ビルド カーネル ツリー
目次0. システムに付属するカーネルツリー1. 環境設定最初のステップステップ2 2. ソースコード...
Vue lazyload 画像遅延読み込み例の詳細な説明
ドキュメント: https://github.com/hilongjw/vue-lazyload 1...
JavaScriptオブジェクトをマージするさまざまな方法の詳細な説明
目次オブジェクトをマージするさまざまな方法（インターフェースを通じてデータを取得し、それをローカル ...
MySQL 文字列連結と null 値の設定のためのインスタンス メソッド
#文字列連結 concat(s1,s2); テーブル内の last_name と first_nam...
フレックスとポジションの互換性の詳細な説明マイニングノート
今日は、すべてのブラウザ (主に IE 9 以上と Chrome) と互換性のある自分のホームページ...
JavaScript のよりエレガントなエラー処理方法 async await
目次背景なぜエラー処理が必要なのでしょうか? async await より適切なエラー処理まとめ要約...
Vue-cliフレームワークはタイマーアプリケーションを実装します
技術的背景このアプリケーションは vue-cli フレームワークを使用し、カスタム コンポーネント ...
FTP環境設定ソリューション（vsftpd）の詳細な説明
1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...