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を動的にブロックします
推薦する
MySQL ベストプラクティス: パーティションテーブルの基本タイプ
MySQL パーティションテーブルの概要MySQL の人気が高まるにつれて、MySQL に保存される...
間違った MySQL コマンドをキャンセルしたい場合はどうすればいいですか?
間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...
MySQLデータベースエンジンをInnoDBに変更する
PS: ここではPHPStudy2016を使用しています1. 変更中にMySQLを停止する2. my...
CentOS7 デプロイメント Flask (Apache、mod_wsgi、Python36、venv)
1. Apacheをインストールする # yum インストール -y httpd httpd-de...
画像ブラインド表示の効果を実現するための純粋な CSS の例
まず、完成した効果をお見せしましょう 主なアイデア: 実際、このブラインドは一種の手品を使用していま...
MySQLは、統計クエリを最適化するために、sum、case、whenを巧みに使用します。
私は最近、会社で統計レポートの開発に関わるプロジェクトに取り組んでいました。データの量が比較的多かっ...
Zabbix設定 DingTalkアラーム機能実装コード
必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...
Linuxシステムのログの詳細な紹介
目次1. ログ関連サービス2. システム内の共通ログファイル1. ログ関連サービスCentOS 6....
Windows での MySQL 8.0.15 の詳細なインストールと使用のチュートリアル
この記事では、MySQL 8.0.15の詳細なインストールと使用方法のチュートリアルを参考までに紹介...
HTML_PowerNode Java アカデミーでテーブルを動的に追加する
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <html> <...
Windows Server win2003、win2008R2、win2012、win2016、win2019 システム バージョン間の違い
最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...
フロントエンド プロジェクトのデフォルトのスクロール バー スタイルを変更する (概要)
スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...
ローカル画像サーバーのNginx構成の実装
目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...
フロントエンドJavaScriptは関数のカリー化を完全に理解している
目次1. カレーとは何か2. カレーの用途3. カリー化ユーティリティ関数をカプセル化する方法 1....
無効と読み取り専用で入力を読み取り専用に設定する
読み取り専用入力を実現するには、無効と読み取り専用の 2 つの方法があります。当然、どちらの結果も読...