コメント:この記事では、主に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>