コメント：この記事では、主にCanvas Shadow Effectが実装されているHTML5の例を紹介します
HTML5にCanvas Shadow Effectを実装します
<！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キャンバス</h1>
<pre>塗りつぶしおよびストローククリップ</pre>
<div>
<canvas> </canvas>
</div>
</body>
</html>