HTML5Canvas陰影用法演示-創(chuàng)新互聯(lián)

HTML5 Canvas陰影用法演示

創(chuàng)新互聯(lián)建站主營小店網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,小店h5微信平臺小程序開發(fā)搭建,小店網(wǎng)站營銷推廣歡迎小店等地區(qū)企業(yè)咨詢

HTML5 Canvas中提供了設(shè)置陰影的四個屬性值分別為：

context.shadowColor = “red” 表示設(shè)置陰影顏色為紅色

context.shadowOffsetX = 0表示陰影相對TEXT的水平距離，0表示兩者水平位置重合

context.shadowOffsetY = 0表示陰影相對TEXT的垂直距離，0表示兩者垂直位置重合

context.shadowBlur = 10 陰影模糊效果，值越大模糊越厲害。

一個最簡單的帶有陰影的矩形代碼如下：

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.fillRect(10, hh+10, 200,canvas.height/4-20);

效果如下：

HTML5 Canvas陰影用法演示

陰影文字：

只要設(shè)置shadowOffsetX與shadowOffsetY的值，當(dāng)值都正數(shù)時，陰影相對文字的右下

方偏移。當(dāng)值都為負(fù)數(shù)時，陰影相對文字的左上方偏移。

3D拉影效果：

在同一位置不斷的重復(fù)繪制文字同時改變shadowOffsetX、shadowOffsetY、shadowBlur

的值，從小到大不斷偏移不斷增加，透明度也不斷增加。就得到了拉影效果文字。

邊緣模糊效果文字：

在3D拉影效果的基礎(chǔ)上在四個方向重復(fù)，就得到了邊緣羽化的文字效果。

運(yùn)行效果：

HTML5 Canvas陰影用法演示

程序代碼：

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="chrome=IE8"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Canvas Clip Demo</title> <link href="default.css" rel="stylesheet" /> 	<script> 		var ctx = null; // global variable 2d context 		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("Canvas not supported. Please install a HTML5 compatible browser."); 			    return; 			} 			var context = canvas.getContext('2d'); 			 			// section one - shadow and blur 			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 two - shadow font 			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 three - down shadow effect 			var hh = canvas.height/4 + hh; 			context.fillStyle="black"; 			context.fillRect(0, hh, canvas.width, canvas.height/4); 			for(var i = 0; i < 10; i++) 			{ 				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 four -  fade effect 			var hh = canvas.height/4 + hh; 			context.fillStyle="green"; 			context.fillRect(0, hh, canvas.width, canvas.height/4); 			for(var i = 0; i < 10; 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 i = 0; i < 10; 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 i = 0; i < 10; 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 < 10; 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); 			} 		} 		 	</script> </head> <body> 	<h2>HTML5 Canvas Clip Demo - By Gloomy Fish</h2> 	<pre>Fill And Stroke Clip</pre> 	<div id="my_painter"> 		<canvas id="text_canvas"></canvas> 	</div> </body> </html>
轉(zhuǎn)載請注明

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：HTML5Canvas陰影用法演示-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://bm7419.com/article18/hdogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、企業(yè)網(wǎng)站制作、網(wǎng)站排名、網(wǎng)站導(dǎo)航、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司