この記事では、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 サイト (m.sbmmt.com) に注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
