在HTML5中實現Canvas陰影效果
畫布剪輯示範
< ;link href="default.css " rel="stylesheet"/>
<script><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;<g🎜> canvas.height. clientHeight;<br /> <br /> if (!canvas.getContext) {<br /> console.log ("Canvas 不支援。請安裝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.strokeStyle = "RGBA(0, 255, 0, 1)"; <br /> context.lineWidth = 2;<br /> context.linesText("模糊畫布", 40, 80);<br /> <br /> // 第二節- 陰影字體<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 /> <br /> context.shadowColor = "RGBA(127,127,127,1)";<br /> context.shadowOffsetX = 3 ;<br /> context.shadowOffsetY = 3;<br /> context.shadowBlur = 0); "RGBA(0, 0, 0, 0.8)";<br /> context.fillText("模糊畫布" , 40, 80 hh);<br /> <br /> // 第三部分- 下陰影效果<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;我< 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 /> // 第四部分- 淡入淡出效果<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("模糊畫布", 40, 80 hh);<br /> }<br /> for(變數我= 0;我< 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, 1271, 127, 127, 1271 )";<br /> context.fillText("模糊畫布", 40 , 80 小時);<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 /> 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 /> <> }<br /> <br /> < ;/script><br /><br /><body><br /> <h1>HTML5 畫布<br /> <pre class="brush:php;toolbar:false">填滿與描邊剪輯<br /> <div id ="my_painter"><br /> <canvas id="text_canvas"><br /> </script>
html>
