1. 程式人生 > 其它 >canvas給文字增加陰影效果

canvas給文字增加陰影效果

技術標籤:canvascanvas

	var canvas = document.getElementById('canvas');
		canvas.width='300';
		canvas.height='300';
		var ctx = canvas.getContext('2d');
		draw()
		 
		function draw(){
		    ctx.shadowOffsetX=-3;//用來設定陰影在 X軸的延伸距
		    ctx.shadowOffsetX=-3;//用來設定陰影在 Y軸的延伸距
		    ctx.shadowBlur = 2;//設定陰影的模糊程度 預設0
 			ctx.shadowColor = "rgba(0, 0, 0, 0.5)";//設定陰影顏色效果
			
			ctx.font = '30px Times New Roman';//設定字型樣式
			ctx.fillStyle = "blue";//設定字型顏色
       		ctx.fillText("同志們好", 100, 100);
		}

程式碼執行效果: