html5_html5チュートリアルスキルでのキャンバスの影効果の実装例

HTML5 での Canvas シャドウ効果の実装

コードをコピーします コードは次のとおりです: キャンバス クリップ デモ &lt ;link href="default.css" rel="stylesheet" /> var ctx = null; // グローバル変数 2d context 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 互換のブラウザをインストールしてください。」); return; } 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("キャンバスをぼかす", 40, 80); context.ストロークスタイル = "RGBA(0, 255, 0, 1)"; context.lineWidth = 2; context.drawingText("キャンバスをぼかす", 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("キャンバスをぼかす" , 40, 80 hh);

// セクション 3 - ダウン シャドウ効果 var hh = Canvas.height/4 hh; context.fillStyle="black"; コンテキスト。 fillRect(0, hh, Canvas.width, Canvas.height/4); for(var i = 0;私は＜ 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("キャンバスをぼかす" , 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 { 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(変数 i = 0;私は＜ 10; i ) { context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")"; context.shadowOffsetX = 0; コンテキスト。 shadowOffsetY = i*2; context.shadowBlur = i*2; context.fillStyle = "RGBA(127, 127, 127, 1)"; context.fillText("キャンバスをぼかし", 40 , 80 hh); } for(var i = 0; 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 { 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("キャンバスをぼかす", 40, 80 hh); } }

&lt ;/script> HTML5 Canvas 塗りつぶしとストロークのクリップ