Html5 Canvas 事前学習ノート (8) -Shadow

この記事では、html5 のいくつかの状態値を紹介します。html5 の描画コンテキストは、シャドウの 4 つの状態値コントロール、つまり shadowBlur を紹介します。 、shadowOffsetX、shadowOffsetY、およびshadowColor。ここで、shadowBlurは影のピクセルブラー値、shadowOffsetXとshadowOffsetYはx軸上の影のオフセット値です、そしてy軸, shadowColor は影の色の値で、デフォルト値は最初の 3 つの値がすべて 0 で、最後の値は透明な黒に設定されます。以下の例に示すように、値の 2 つを変更するだけで影効果が表示されます。同時に、以下の例では save を使用してそれを行うこともできます。保存して復元ポップアップを表示します。

描画コードは以下の通りです

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.restore();
context.fillRect(200,50,100,100);

ここではxとyのオフセット値が設定されていないので、影の色を赤に設定するだけです。設定すると、デフォルトは次のようになります。影を囲む状態、shadowColorは完全に不透明な赤に設定され、透明度はargb値を通じて設定することもできますが、対応する影の差は大きくありません:

は次のコードに変更され、効果は次のとおりです:

描画コードは次のとおりです:

context.fillStyle = "red";
context.save();
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.fillRect(50,50,100,100);
context.shadowColor = "argb(255,0,0,0.5)";
context.fillRect(200,50,100,100);

x軸上の影のオフセット値とy軸は、名前が示すように、それぞれ上で影をオフセットします。x軸とy軸は、対応する距離だけオフセットされます。効果は次のとおりです:

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fillRect(50,50,100,100);

影は正方形だけでなく、他の形状にも適用できます:

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.beginPath();//开始路径
context.arc(100,100,60,Math.PI / 6,Math.PI,true);
context.closePath();
context.fill();//填充
context.beginPath();//开始路径
context.moveTo(200,50);//设置路径，参数为原点
context.lineTo(360,50);//设置路径直到本线段的终点
context.lineTo(360,150);//设置路径直到本线段的终点
context.closePath();//结束路径
context.fill();//正式绘制

上記は、Html5 Canvas の事前学習メモ (8) です。 - 影の内容など 関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。