HTML5 での Canvas シャドウ効果の実装 コードをコピーしますコードは次のとおりです: キャンバス クリップ デモ< ;link href="default.css" rel="stylesheet" /> <br /> var ctx = null; // グローバル変数 2d context<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 (「キャンバスはサポートされていません。HTML5 互換のブラウザをインストールしてください。」);<br /> return;<br /> }<br /> var context = Canvas.getContext('2d');<br /> <br /> // セクション 1 - シャドウとブラー<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("キャンバスをぼかす", 40, 80);<br /> context.ストロークスタイル = "RGBA(0, 255, 0, 1)";<br /> context.lineWidth = 2;<br /> context.drawingText("キャンバスをぼかす", 40, 80);<br /> <br /> // セクション 2 - シャドウ フォント<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("キャンバスをぼかす" , 40, 80 hh);<br /> <br /> // セクション 3 - ダウン シャドウ効果<br /> var hh = Canvas.height/4 hh;<br /> context.fillStyle="black";<br /> コンテキスト。 fillRect(0, hh, Canvas.width, Canvas.height/4);<br /> for(var i = 0;私は＜ 10; i )<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("キャンバスをぼかす" , 40, 80 hh);<br /> }<br /> <br /> // セクション 4 - フェード効果<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(変数 i = 0;私は＜ 10; i )<br /> {<br /> context.shadowColor = "RGBA(255, 255, 255," ((10-i)/10) ")";<br /> context.shadowOffsetX = 0;<br /> コンテキスト。 shadowOffsetY = i*2;<br /> context.shadowBlur = i*2;<br /> context.fillStyle = "RGBA(127, 127, 127, 1)";<br /> context.fillText("キャンバスをぼかし", 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("キャンバスをぼかす", 40, 80 hh);<br /> }<br /> }<br /> <br /> < ;/script><br></head><br><body><br> <h1>HTML5 Canvas</h1><br> <pre>塗りつぶしとストロークのクリップ</pre><br> <div id="my_painter"><br> <canvas id="text_canvas"></canvas><br> </div><br></body><br></ html><br> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
