検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5-9 __キャンバス シャドウ API

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

黄舟
黄舟オリジナル
2017-02-18 14:43:071743ブラウズ

この記事では、テキストにぼかした影効果を追加する 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)!



声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5-8 __キャンバステキスト次の記事：HTML5-8 __キャンバステキスト

関連記事

続きを見る