JavaScript キャンバスは影付きのグラフィックとテキストを実装します

JavaScript キャンバスは影付きのグラフィックとテキストを実装します

キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりです。

ctx.shadowBlur=20;影のぼかし範囲を設定します。
ctx.shadowColor;影のぼかし色を設定します。

使用することもできます

shadowOffsetX プロパティは、影とグラフィック間の水平距離を設定します。
shadowOffsetY プロパティは、影とグラフィック間の垂直距離を設定します。

コード:

<!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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSP はポップアップログインボックスと影の効果を実装します
  • WebGL three.js 学習ノート: 影とオブジェクトのアニメーション効果
  • Three.js を使用して影の効果を実現する方法のサンプルコード
  • js 現在のページのログイン登録ボックス、固定 div、下部シャドウのサンプル コード
  • JS 現在のページのログイン登録ボックス、固定 DIV、下部シャドウのサンプル コード
  • 干渉のない影の効果を実現する js はシンプルで使いやすいです (添付ファイルのダウンロード)
  • マイクロソフトが以前使用していたDiv+JSシャドウメニュー
  • JS を使用して Web ページ要素の影の効果を実現することに関する研究の概要

<<:  Linux サーバーでの MySQL インストール情報の表示

>>:  NginxはLua+Redisを使用してIPを動的にブロックします

推薦する

js のループメソッドとさまざまなトラバーサルメソッド

目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...

Tomcat と WebLogic で純粋な HTML ファイルを展開するプロセスの分析

1. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...

純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

Windows システムに mysql5.7.21 をインストールするための詳細なチュートリアル

MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...

Nodejs での WeChat アプレット メッセージ プッシュの実装

サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...

PCとモバイルの適応の問題に対する迅速な解決策

Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...

Linuxでシンボリックリンクを削除(削除)するコマンド

Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...

スライドによるページめくり効果とクリックイベント問題をモバイル端末上で実装する

前述のこの記事はとても短いです〜主な目的は、モバイル端末上のクリックと js イベントのメカニズムに...

Vue の vue.$set() メソッドのソースコード例の詳細な説明

Vue を使用してプロジェクトを開発する過程で、次のような問題によく遭遇します。Vue のデータでオ...

ブラウザのCSS、JavaScript、背景画像のキャッシュをクリアする簡単な方法

実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...

Javascript イベントキャプチャとバブリングメソッドの詳細な説明

目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...

CentOS MySQLデータベースのスケジュールバックアップを実装する方法

次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...

VC6.0をWIN10にインストールすると使用できない問題の解決方法

VC6.0は確かに古すぎるVC6.0は昔の開発ツールです。現在のwin10では対応していません。しか...

HTML で Flash を読み込む方法 (2 つの実装方法)

最初の方法: CSSコード:コードをコピーコードは次のとおりです。 .b970-a{幅:970px;...