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を動的にブロックします
推薦する
閲覧時に作成されたWebページの下部にある余分な空白スペースを削除する方法
Dreamweaver または FrontPage を使用して HTML Web ページを作成する場...
Linux viコマンドの知識ポイントと使い方のまとめ
Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...
CocosCreator 学習モジュールスクリプト
Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...
サーバー上で Nginx を使用して Springboot プロジェクトをデプロイする方法の詳細なチュートリアル (jar パッケージ)
1. Javaプロジェクトをjarパッケージにパッケージ化するここではMavenツールを使用します...
HTML テーブル マークアップ チュートリアル (42): テーブル ヘッダーの水平方向の配置属性 ALIGN
水平方向では、テーブル ヘッダーの配置を左、中央、右に設定できます。基本的な構文<TH ALI...
ストアド プロシージャでエラー状態をトリガーする mysql ストアド プロシージャの分析例 (SIGNAL および RESIGNAL ステートメント)
この記事では、例を使用して、MySQL がストアド プロシージャで引き起こすエラー状態 (SIGNA...
DockerはホストのMysql操作に接続します
今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...
CSS3を使って歌詞進行テキストカラー塗りつぶし変更の動的効果を実装するアイデアの詳細な説明
音楽を再生すると、曲が進むにつれて歌詞が徐々に色づきます。色は単語ごとに変わるのではなく、左から右へ...
Flex レイアウトで適応型ページを作成する (構文と例)
Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...
MySQL レプリケーションの詳細な説明と簡単な例
MySQL レプリケーションの詳細な説明と簡単な例マスタースレーブレプリケーション技術は、MySQL...
MySql5.x を MySql8.x にアップグレードする方法と手順
MySQL 5.x と MySQL 8.0.X のいくつかの違いapplication.proper...
CentOs システムで Python と yum をアンインストールするソリューション
事故の背景: 数日前、プロジェクトの必要性により、サーバーに python-mysql モジュールを...
Javascript で関数のカリー化とデカリー化を実装する方法
関数のカリー化（黒い疑問符の顔）？ ? ?カレー（黒い疑問符の顔）？ ? ?これは完璧な中国語翻訳で...
Tomcatソースコードをideaにインポートする方法
目次1. Tomcatコードをダウンロードする2. ダウンロード後のディレクトリ構造3. ソースコー...
Linux コマンドを使用してオーディオ形式を変換および結合する方法
FFmpeg flacをインストールする eric@ray:~$ sudo apt install ...