JavaScript キャンバスは影付きのグラフィックとテキストを実装します
|
キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりです。
ctx.shadowBlur=20;影のぼかし範囲を設定します。 使用することもできます shadowOffsetX プロパティは、影とグラフィック間の水平距離を設定します。 コード：
<!DOCTYPE html>
<html>
<ヘッド>
<title>影付きのグラフィックとテキストを作成する</title>
</head>
<本文>
<h3 align="center">放射状グラデーションカラー</h3>
<時間>
<キャンバスid="myc1" 幅="800" 高さ="600"></キャンバス>
<script type="text/javascript">
var myc = document.getElementById("myc1"); // 新しいキャンバスを描画します var ctx = myc.getContext("2d"); // 描画環境を 2d に設定します
var myg = ctx.createRadialGradient(130,200,0,130,200,90);
//addColorStop メソッドの最初のパラメーターは画像内のパーセンテージ、2 番目のパラメーターは色です。myg.addColorStop(0,"white");
myg.addColorStop(0.5、"ピンク");
myg.addColorStop(0.6、"緑");
myg.addColorStop(0.4、"青");
ctx.fillStyle=myg;
ctx.shadowColor="black"; //影の色 ctx.shadowBlur=20; //影のぼかしの範囲 ctx.arc(130,200,100,0,Math.PI*2); //新しい円を描画 ctx.fill();
ctx.beginPath();
var myg1 = ctx.createRadialGradient(550,250,50,550,250,200);
myg1.addColorStop(0,"青");
myg1.addColorStop(0.6、"緑");
myg1.addColorStop(1,"赤");
ctx.fillStyle=myg1;
ctx.font="50px bold"; //フォントサイズとフォントスタイルを設定します ctx.shadowBlur=50; //影のぼかし範囲を設定します ctx.shadowColor="yellow"; //影の色;
ctx.shadowOffsetX=30; // 水平オンラインオフセット;
ctx.shadowOffsetY=-30; //垂直オフセット下方向;
ctx.fillText("放射性グラデーションテキスト",350,200);
</スクリプト>
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux サーバーでの MySQL インストール情報の表示
>>: NginxはLua+Redisを使用してIPを動的にブロックします
推薦する
vscodeで保存した後のHTML自動フォーマットの問題を解決する
vsCode のバージョンは最近更新され、現在のバージョン番号は 1.43 です。実際、vsCode...
HTMLはシンプルで美しいログインページを作成します
まずは見てみましょう。 HTML ソースコード: XML/HTML コードコンテンツをクリップボード...
VMware 仮想マシン (CentOS7 イメージ) を使用して Linux をインストールする
1. VMwareのダウンロードとインストールリンク: https://www.jb51.net/s...
Win10にCentOS7仮想マシンをインストールする
1. VMware Workstation 64バージョンをダウンロードするhttps://www....
HTML の div と span の比較_PowerNode Java Academy
1. <div></div> と <span></spa...
Linux で MySQL データベースのデータ ファイル パスを変更する手順
rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...
MySQLの日付と時刻関数の使用の概要
この記事はMySQL 8.0に基づいていますこの記事では、日付と時刻の操作のための MySQL 関数...
vue+django でファイルをダウンロードする例
目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...
Centos8 システムの VMware インストール チュートリアル図 (中国語グラフィカル モード)
目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...
MySQL可視化ツールNavicatへの接続方法
Navicatをインストールした後次のエラーが発生する場合があります: Client does no...
CSS3 における構造擬似クラスセレクターと擬似要素セレクターの使い方の詳細な説明
構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...
Vue ページ内の公開マルチタイプ添付画像アップロード領域と適用可能な折りたたみパネル (サンプルコード)
フロントエンド プロジェクトでは、添付ファイルのアップロードは非常に一般的な機能であり、ほぼすべての...
Linuxのip netnsコマンドを使用してネットワークポートを分離し、IPアドレスを設定します。
1. 分離マーカーを追加します。 ip netns add fd 2. 指定されたネットワーク カ...
Cronジョブを使用してCpanelでPHPを定期的に実行する方法
cpanel 管理バックエンドを開き、「詳細」オプションの下に「Clock Guardian Job...
HTML テーブル タグ チュートリアル (47): ネストされたテーブル
<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...