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を動的にブロックします
推薦する
docker公式mysqlイメージのカスタム構成の詳細な説明
インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...
Linux での mysql8.018 のインストールと設定のプロセスの詳細な説明
Windowsでのインストールの紹介：こちらもご覧ください –》WindowsでのMySQL 8.0...
MySQL 5.6 圧縮パッケージのインストール方法
MySQL には、msi インストールと zip 解凍の 2 つのインストール方法があります。 zi...
DockerでLNMPアーキテクチャを展開する方法
環境要件: IPホスト名192.168.1.1ノード1プロジェクト計画:コンテナネットワークセグメン...
js は、Element の入力コンポーネントのいくつかの機能を実装し、それをコンポーネントにカプセル化します (サンプルコード)
現在実装されているのは、基本的な使用方法、クリア可能なボックス、パスワードボックスです。参考リンク:...
MySQL max_allowed_packet 設定
max_allowed_packet は、受け入れるパケットのサイズを設定するために使用される ...
Linux ダイナミックライブラリの生成と使用ガイドの詳細な説明
Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...
初心者のためのWebサイト構築入門 ③ エイリアス（CNAME）レコードとURL転送
①. エイリアス（CNAME）レコードの使用方法：前回の投稿のドメイン名解決では、A レコードの解...
Vue3.0でカスタム命令を書くための簡単な手順
序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...
NODE.JS を使用して WEBSERVER を作成する手順
目次Node.jsとはNodeJSをインストールするNode を使用して Hello World を...
CSSはletter-spacingプロパティを通じて単語間の間隔を制御します。
letter-spacing プロパティ: 文字間のスペース (文字間隔) を増減します。このプロ...
MySQLデータベースを操作するためのコマンドラインツールmycliの簡単な紹介
GitHub にはあらゆる種類の魔法のツールがあります。今日、私はデータベースを操作するためのコマン...
基本的な HTML ディレクトリの問題 (相対パスと絶対パスの違い)
相対パス - ファイルを参照する Web ページの場所に基づいて確立されたディレクトリ パス。そのた...
中央のテキストの両側に水平線を描くためのCSS
1. vertical-align プロパティは次の効果を実現します。 vertical-alig...
XHTML の IE 条件付きコメント
<br />条件付きコメントはIEシリーズ製品上でXHTMLコード処理を分離して行うこと...