html5实现canvas阴影效果示例_html5教程技巧

在HTML5中实现Canvas阴影效果

复制代码

代码如下:

<script><br /> var ctx = null; // global variable 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("Canvas not supported. Please install a HTML5 compatible browser.");<br /> return;<br /> }<br /> var context = canvas.getContext('2d');<br /> <br /> // section one - shadow and blur<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 two - shadow font<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 three - down shadow effect<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; i < 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("Blur Canvas", 40, 80+hh);<br /> }<br /> <br /> // section four - fade effect<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 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 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>

HTML5 Canvas

Fill And Stroke Clip