コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 本文

HTML5-9 __キャンバス シャドウ API

黄舟
リリース： 2017-02-18 14:43:07
オリジナル
1700 人が閲覧しました

この記事では、テキストにぼかした影効果を追加する Canvas Shadow API を紹介します。キャンバスの影効果アプリケーションは以前にも紹介しましたが、ここでは主にテキストの影効果を紹介します。

影効果の使用には、 「程度」を把握してください


例を見てください


<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>文本阴影示例</title>
<canvas id="trails" style="border: 1px solid;"  width="400" height="300"> </canvas>
<script>
    drawTrails();
    function drawTrails() {
        var canvas = document.getElementById(&#39;trails&#39;);
        var context = canvas.getContext(&#39;2d&#39;);
        context.save();
        context.font = "60px impact";
        context.fillStyle = &#39;#996600&#39;
        context.textAlign = &#39;center&#39;;

        // 设置文字阴影的颜色为黑色，透明度为20%
        context.shadowColor = &#39;rgba(0, 0, 0, 0.2)&#39;;

        // 将阴影向右移动15px, 向上移动10px
        context.shadowOffsetX = 15;
        context.shadowOffsetY = -10;

        // 轻微模糊阴影
        context.shadowBlur = 2;
        context.fillText(&#39;Happy Trails!&#39;, 200, 60, 400);
        context.restore();
    }
</script>
</html>
ログイン後にコピー

レンダリングを実行してください


上記はCSSスタイルによって生成された影で、位置が変わるだけです、以前紹介したとは比較できません生成された影(木の影)を変換して同期を保ちます。 一貫性を保つために、キャンバスに影を描画するときは 1 つのメソッドのみを使用するようにしてください

上記は HTML5 9 __Canvas の Shadow API の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトを参照してください。 (www.php.cn)!



関連ラベル：
HTML5，Canvas，Shadow
ソース：php.cn
前の記事：HTML5-8 __キャンバステキスト 次の記事：HTML5 10 __Canvas API を使用してヒート マップを作成する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート