キャンバスに影を設定するにはどうすればよいですか?キャンバスに影を設定する方法-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

キャンバスに影を設定するにはどうすればよいですか?キャンバスに影を設定する方法

Sep 17, 2018 pm 01:43 PM

canvas 影

CSS を使用して影効果を実現できることはわかっていますが、HTML5 のキャンバスを使用して影効果を設定することもできます。そのため、次の記事では、キャンバスを使用して影効果を設定する方法を紹介します。 . コンテンツを直接見てみましょう。

まず、キャンバスに描画するときは、テキスト、グラフィック、イメージ、ストロークや塗りつぶしのいずれであっても、関連するプロパティを設定することで影を設定できることを知っておく必要があります。コンテキストオブジェクト。

Canvas は、次の 4 つのプロパティを使用して影効果を作成します。

shadowColor: 影の色。デフォルト値は完全に透明な黒です。したがって、このプロパティが不透明に設定されていない場合、影は表示されません。このプロパティは、色を表す文字列にのみ設定できます。グラデーションやパターンは使用できません。半透明のシャドウを使用すると、影を通して背景が見えるため、非常にリアルな影効果を生み出すことができます。

shadowOffsetX: X 軸上のシャドウのオフセット (ピクセル単位)。デフォルト値は 0 で、影はシェイプの真下に配置され、非表示になります。 0 より大きい場合は右にシフトし、0 より小さい場合は左にシフトします。影のオフセットが大きいほど、生成される影も大きくなり、描画されたグラフィックスがキャンバス上でより高く表示されます。

shadowOffsetY: Y 軸上のシャドウのオフセット (ピクセル単位)。デフォルト値は 0 で、影はシェイプの真下に配置され、非表示になります。 0より大きい場合は下にシフトします。0より小さい場合は上にシフトします。影のオフセットが大きいほど、生成される影も大きくなり、描画されたグラフィックスがキャンバス上でより高く表示されます。

shadowBlur: 影のブラー値。は、影をぼかすためにガウスぼかし方程式で使用されるピクセル独立の値です。デフォルト値は 0 で、鮮明な影が生成されます。値が大きいほど、影がぼやけます。

注: キャンバスの仕様によれば、ブラウザは次の 2 つの条件が満たされた場合にのみ影を描画します。属性値が指定されています。

2、shadowOffsetX、shadowOffsetY、shadowBlur の 3 つの属性のうち、少なくとも 1 つの属性が 0 以外の値を持っています。

Canvas によって実装された影効果のコード例を見てみましょう:

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Canvas</title>
 </head>
 <style type="text/css">
    body{margin:20px auto; padding:0; width:800px; }
    canvas{border:dashed 2px #CCC}
 </style>
 <script type="text/javascript">
    function $$(id){
        return document.getElementById(id);
    }
    function pageLoad(){
        var can = $$(&#39;can&#39;);
        var cans = can.getContext(&#39;2d&#39;);
        cans.fillStyle = &#39;green&#39;;
        cans.shadowOffsetX = 5;
        cans.shadowOffsetY = 5;
        cans.shadowColor = &#39;#333&#39;;
        cans.shadowBlur = 10;
        cans.fillRect(200,300,400,200);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>