コメント：HTML5キャンバスは、シャドウテキスト、3Dシャドウプル効果、およびエッジブルーエフェクトテキストを実現するためにシャドウを設定するための4つの属性値を提供します。特定のデモコードは次のとおりです。学びたい友達はそれを参照できます。
HTML5キャンバスは、シャドウを設定するために4つの属性値を提供します。Context.ShadowColor =赤は影の色を赤に設定することを意味します
Context.ShadowOffSetx = 0テキストに対する影の水平距離を示し、0は2つのオーバーラップの水平位置を示します
Context.shadowoffsety = 0テキストに対する影の垂直距離を示し、0は2つのオーバーラップの垂直位置を示します
Context.ShadowBlur = 10シャドウブラーエフェクト、値が大きいほど、ぼやけが大きくなります。
最も単純な影の長方形コードの1つは次のとおりです。
Context.ShadowColor = RGBA（127,127,127,1）;
context.shadowoffsetx = 3;
context.shadowoffsety = 3;
Context.ShadowBlur = 0;
context.fillstyle = rgba（0、0、0、0.8）;
Context.FillRect（10、HH+10、200、Canvas.Height/4-20）;
効果は次のとおりです。
シャドウテキスト：
ShadowOffSetxとShadowOffsetyの値を設定するだけです。両方の値が正の場合、影はテキストの右下に相対的です。
四角いオフセット。すべての値が負の場合、影はテキストの左上からオフセットされます。
3Dシャドウプル効果：
テキストを繰り返して、同じ位置で繰り返し描き、ShadowOffsetx、ShadowOffsety、Shadowblurを変更します
の価値は、常に小さいから大規模に変化しており、その透明性は増加し続けています。その後、Shadow Effectテキストを取得しました。
エッジブラーエフェクトテキスト：
3Dシャドウプル効果に基づいて4つの方向に繰り返され、エッジフェザーリングのテキスト効果が得られます。
ランニング効果：
シーケンスコード：
<！doctype html>
<html>
<head>
<Meta http-equiv = "x-ua-compatible" content = "chrome = ie8">
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<Title> Canvas Clip Demo </title>
<link href = "default.css" />
<スクリプト>
var ctx = null; //グローバル変数2Dコンテキスト
var imageTexture = null;
window.onload = function（）{
var canvas = document.getElementById（ "text_canvas"）;
console.log（canvas.parentnode.clientwidth）;
canvas.width = canvas.parentnode.clientwidth;
canvas.height = canvas.parentnode.clientheight;
if（！canvas.getContext）{
console.log（ "サポートされていないキャンバス。HTML5互換ブラウザをインストールしてください。"）;
戻る;
}
var context = canvas.getContext（ '2d'）;
//セクション1-影とぼやけ
context.fillstyle = "black";
context.fillrect（0、0、canvas.width、canvas.height/4）;
context.font = '60pt calibri';
Context.ShadowColor = "White";
context.shadowoffsetx = 0;
context.shadowoffsety = 0;
Context.ShadowBlur = 20;
Context.FillText（ "Blur Canvas"、40、80）;
context.strokestyle = "rgba（0、255、0、1）";
Context.LineWidth = 2;
Context.StrokeText（ "Blur Canvas"、40、80）;
//セクション2-シャドウフォント
var hh = canvas.height/4;
context.fillstyle = "white";
context.fillrect（0、hh、canvas.width、canvas.height/4）;
context.font = '60pt calibri';
Context.ShadowColor = "RGBA（127,127,127,1）";
context.shadowoffsetx = 3;
context.shadowoffsety = 3;
Context.ShadowBlur = 0;
context.fillstyle = "rgba（0、0、0、0.8）";
context.filltext（ "Blur Canvas"、40、80+HH）;
//セクション3-ダウンシャドウエフェクト
var hh = canvas.height/4 + hh;
context.fillstyle = "black";
context.fillrect（0、hh、canvas.width、canvas.height/4）;
for（var i = 0; i <10; i ++）
{
Context.ShadowColor = "RGBA（255、255、255、" +（（10-I）/10） + "）";
context.shadowoffsetx = i*2;
context.shadowoffsety = i*2;
Context.ShadowBlur = i*2;
context.fillstyle = "rgba（127、127、127、1）";
context.filltext（ "Blur Canvas"、40、80+HH）;
}
//セクション4-フェードエフェクト
var hh = canvas.height/4 + hh;
context.fillstyle = "green";
context.fillrect（0、hh、canvas.width、canvas.height/4）;
for（var i = 0; i <10; i ++）
{
Context.ShadowColor = "RGBA（255、255、255、" +（（10-I）/10） + "）";
context.shadowoffsetx = 0;
context.shadowoffsety = -i*2;
Context.ShadowBlur = i*2;
context.fillstyle = "rgba（127、127、127、1）";
context.filltext（ "Blur Canvas"、40、80+HH）;
}
for（var i = 0; i <10; i ++）
{
Context.ShadowColor = "RGBA（255、255、255、" +（（10-I）/10） + "）";
context.shadowoffsetx = 0;
context.shadowoffsety = i*2;
Context.ShadowBlur = i*2;
context.fillstyle = "rgba（127、127、127、1）";
context.filltext（ "Blur Canvas"、40、80+HH）;
}
for（var i = 0; i <10; i ++）
{
Context.ShadowColor = "RGBA（255、255、255、" +（（10-I）/10） + "）";
context.shadowoffsetx = i*2;
context.shadowoffsety = 0;
Context.ShadowBlur = i*2;
context.fillstyle = "rgba（127、127、127、1）";
context.filltext（ "Blur Canvas"、40、80+HH）;
}
for（var i = 0; i <10; i ++）
{
Context.ShadowColor = "RGBA（255、255、255、" +（（10-I）/10） + "）";
context.shadowoffsetx = -i*2;
context.shadowoffsety = 0;
Context.ShadowBlur = i*2;
context.fillstyle = "rgba（127、127、127、1）";
context.filltext（ "Blur Canvas"、40、80+HH）;
}
}
</script>
</head>
<body>
<H1> HTML5 CANVAS CLIP DEMO-暗い魚による</h1>
<pre>塗りつぶしおよびストローククリップ</pre>
<div>
<canvas> </canvas>
</div>
</body>
</html>