Implémentation de l'effet d'ombre Canvas en HTML5 Copier le codeLe code est le suivant : Démo du clip sur toile< ;link href="default.css" rel="stylesheet" /> <br> var ctx = null; // variable globale contexte 2D<br> var imageTexture = null;<br> window.onload = function() {<br> var canvas = document.getElementById("text_canvas");<br> console.log(canvas.parentNode .clientWidth);<br> canvas.width = canvas.parentNode.clientWidth;<br> canvas.height = canvas.parentNode.clientHeight;<br> <br> if (!canvas.getContext) {<br> console.log ("Canevas non pris en charge. Veuillez installer un navigateur compatible HTML5.") - ombre et flou<br> context.fillStyle="black";<br> context.fillRect(0, 0, canvas.width, canvas.height/4);<br> context.font = '60pt Calibri';<br> <br> context.shadowColor = "white";<br> context.shadowOffsetX = 0;<br> context.shadowOffsetY = 0;<br> context.shadowBlur = 20;<br> context.fillText("Blur Canvas ", 40, 80);<br> context.StrokeStyle = "RGBA(0, 255, 0, 1)";<br> context.lineWidth = 2;<br> context.StrokeText("Blur Canvas", 40, 80);<br> <br> // section deux - police d'ombre<br> var hh = canvas.height/4;<br> context.fillStyle="white";<br> context.fillRect(0, hh, canvas.width, canvas.height/4);<br> context.font = '60pt Calibri';<br> <br> context.shadowColor = "RGBA(127,127,127,1)";<br> context.shadowOffsetX = 3 ;<br> context.shadowOffsetY = 3;<br> context.shadowBlur = 0;<br> context.fillStyle = "RGBA(0, 0, 0, 0.8)";<br> context.fillText("Blur Canvas" , 40, 80 hh);<br> <br> // section trois - effet d'ombre vers le bas<br> var hh = canvas.height/4 hh;<br> context.fillStyle="black";<br> context. fillRect(0, hh, canvas.width, canvas.height/4);<br> for(var i = 0; je &Lt ; 10 ; je )<br> {<br> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br> context.shadowOffsetX = i*2;<br> context.shadowOffsetY = i*2;<br> context.shadowBlur = i*2;<br> context.fillStyle = "RGBA(127, 127, 127, 1)";<br> context.fillText("Blur Canvas" , 40, 80 hh);<br> }<br> <br> // section quatre - effet de fondu<br> var hh = canvas.height/4 hh;<br> context.fillStyle="green";<br> context.fillRect(0, hh, canvas.width, canvas.height/4);<br> for(var i = 0; i < 10; i )<br /> {<br /> context.shadowColor = "RGBA (255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = 0;<br /> context.shadowOffsetY = -i*2;<br /> context.shadowBlur = i *2;<br /> context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> for( var je = 0; je &Lt ; 10 ; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = 0;<br /> contexte. shadowOffsetY = i*2;<br /> context.shadowBlur = i*2;<br /> context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40 , 80 hh);<br /> }<br /> for(var i = 0; i < 10; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10 -i)/10) ")";<br /> context.shadowOffsetX = i*2;<br /> context.shadowOffsetY = 0;<br /> context.shadowBlur = i*2;<br /> context.fillStyle = "RGBA (127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> for(var i = 0; i < 10; i ) <br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = -i*2;<br /> context .shadowOffsetY = 0;<br /> context.shadowBlur = i*2;<br />context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("Blur Canvas", 40, 80 hh);<br /> }<br /> }<br /> <br /> < ;/script><br></head><br><body><br> <h1>HTML5 Canvas</h1><br> <pre>Clip de remplissage et de contour</pre><br> <div id="my_painter"><br> <canvas id="text_canvas"></canvas><br> </div><br></body><br></ html><br> </div>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
