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 をインストールすると初期パスワードが与えられますが、この初期パスワードは大文字と小文字の...
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 をアップグレードする方法には、インプレース アップグレードと論理アップグレ...