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 のこと)
推薦する
フレックスレイアウトのスペース間の最後の行の左揃えの問題を解決する方法
まずはコードと効果を見てみましょう↓ <スタイル> 。主要 { アウトライン: 1px ...
MySQL インデックスの最適化: ページング探索の詳細な紹介
目次MySQL インデックス最適化ページングの調査ケース1ケース2 MySQL インデックス最適化ペ...
MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析
多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...
HTML+CSS でハートビートの特殊効果を作成する
今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...
Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル
1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...
Linux resolv.conf の簡単な分析
1. はじめにresolv.conf は、さまざまなオペレーティング システムのドメイン ネーム シ...
UbuntuはSSHサービスのリモートログイン操作を開始します
ssh-secure シェルは、安全なリモート ログインを提供します。組み込みシステムを開発し、Li...
Linux 名前空間ユーザーの詳細な説明
ユーザー名前空間は Linux 3.8 で追加された新しい名前空間で、ユーザー ID やグループ I...
MySQL データベースにおける中国語文字化け問題の詳細な説明
insert into employee values(null,'張三','...
Dockerfileを使用してDockerイメージを構築する手順
Dockerfile は、命令を含むテキスト ファイルです。各命令はレイヤーを構築するため、各命令の...
CSSは、入力ボックスのフローティングテキスト効果を実現するために、placeholder-shown疑似クラスを使用します。
この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問...
Linuxコマンドをバックグラウンドで実行する方法
通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...
Jmeterはデータベースプロセスダイアグラムに接続します
1. MySQL jdbc ドライバー (mysql-connector-java-5.1.28.j...
Linux入力サブシステムフレームワーク原理の分析
入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...
MySQL データベース監視ソフトウェア lepus の使用上の問題と解決策
lepus3.7 を使用して MySQL データベースを監視中に、次の問題が発生しました。このブログ...