キャンバスを使用して、参照用の影付きのグラフィックとテキストを作成します。具体的な内容は次のとおりです。 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を動的にブロックします
目次forループwhileループdo-while ループループのネストトラバーサルメソッド~のために...
1. まず、純粋なHTMLファイルにはindex.htmlというエントリが必要です。 2. Tomc...
レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...
以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...
MySQL インストーラーは、MySQL ソフトウェアのあらゆるニーズに対応する、使いやすいウィザー...
サブスクリプションメッセージテンプレートを選択または作成するWeChat アプレットにログインし、「...
Web ページを作成する場合、通常、コンピューターの画面サイズと携帯電話の画面サイズの違いなどの問題...
Linux では、シンボリック リンクを作成または削除する必要がある場合があります。もしそうなら、何...
前述のこの記事はとても短いです〜主な目的は、モバイル端末上のクリックと js イベントのメカニズムに...
Vue を使用してプロジェクトを開発する過程で、次のような問題によく遭遇します。Vue のデータでオ...
実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...
目次1. イベント処理モデル1. イベントバブリング(1)3つのdiv要素にイベントをバインドする(...
次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...
VC6.0は確かに古すぎるVC6.0は昔の開発ツールです。現在のwin10では対応していません。しか...
最初の方法: CSSコード:コードをコピーコードは次のとおりです。 .b970-a{幅:970px;...