Beispiel für die Implementierung des Canvas-Schatteneffekts in html5_html5-Tutorial-Fähigkeiten

Implementieren des Canvas-Schatteneffekts in HTML5

Code kopieren Der Code lautet wie folgt: Canvas Clip Demo &lt ;link href="default.css" rel="stylesheet" /> var ctx = null; // globale Variable 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 („Canvas wird nicht unterstützt. Bitte installieren Sie einen HTML5-kompatiblen Browser.“); return; } var context = canvas.getContext('2d');

// Abschnitt eins - Schatten und Unschärfe 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("Leinwand verwischen", 40, 80);

// Abschnitt zwei – Schattenschriftart 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);

// Abschnitt drei – Schatteneffekt nach unten var hh = canvas.height/4 hh; context.fillStyle="black"; context. fillRect(0, hh, canvas.width, canvas.height/4); for(var i = 0; ich { 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); }

// Abschnitt vier – Fade-Effekt 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( var i = 0; ich { 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 { 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("Blur Canvas", 40, 80 hh); } }

&lt ;/script> HTML5 Canvas Füll- und Konturclip