Exemple d'implémentation de l'effet d'ombre sur toile dans les compétences du didacticiel html5_html5

Implémentation de l'effet d'ombre Canvas en HTML5

Copier le code Le code est le suivant : Démo du clip sur toile &lt ;link href="default.css" rel="stylesheet" /> var ctx = null; // variable globale contexte 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 ("Canevas non pris en charge. Veuillez installer un navigateur compatible HTML5.") - ombre et flou 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);

// section deux - police d'ombre 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);

// section trois - effet d'ombre vers le bas var hh = canvas.height/4 hh; context.fillStyle="black"; context. fillRect(0, hh, canvas.width, canvas.height/4); for(var i = 0; je &Lt ; 10 ; je ) { 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); }

// section quatre - effet de fondu 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 je = 0; je &Lt ; 10 ; i ) { context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")"; context.shadowOffsetX = 0; contexte. 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 Clip de remplissage et de contour