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を動的にブロックします

推薦する

MySQL をインストールするときに初期パスワードを忘れた場合のシンプルで効果的な解決策

MySQL をインストールすると初期パスワードが与えられますが、この初期パスワードは大文字と小文字の...

Docker で Oracle 11g イメージ構成をプルダウンする際の問題を分析する

1. イメージをプルするdocker pull レジストリ.cn-hangzhou.aliyuncs...

JSにおけるデータ型の正しい判定方法の例

目次序文typeof は型を正しく判別できますか? instanceof は型を正しく判別できますか...

VMware vSAN 入門概要

1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...

Vueのウェブページスクリーンショット機能の詳しい説明

最近、プロジェクトで写真をアップロードする要件があるのですが、顧客がアップロードする写真のサイズがま...

Mysql マスタースレーブレプリケーションの注意事項の説明

1. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...

docker を使用して crownblog プロジェクトを Alibaba Cloud にデプロイする方法

フロントエンドプロジェクトのパッケージ化.env.productionを見つけて、自分のIPまたはド...

HTML インライン要素と HTML ブロックレベル要素の概要と違い

ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...

Zookeeper&Kafka クラスターを構築するための Docker の実装

最近Kafka勉強しています。クラスタの状態をテストする準備をしていたときに、仮想マシンを 3 つ開...

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

クラウドネイティブテクノロジー Kubernetes (K8S) の紹介

目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...

Alibaba CloudがCloud Shieldから無料のSSL証明書(https)を申請

プロジェクトでは https サービスを使用する必要があるため、Alibaba Cloud では無料...

JSはシンプルなカウンターを実装します

HTML CSS および JavaScript を使用して、プラス、マイナス、ゼロの 3 つのボタン...

Windows で MySQL 5.6 を 5.7 にアップグレードする方法

前面に書かれたMySQL をアップグレードする方法には、インプレース アップグレードと論理アップグレ...