實現字體外部有描邊

公司做的游戲頁面，房間號要有描邊。然后我就開始嘗試，寫了兩種辦法：

第一種：CSS實現 text-stroke實現字體的描邊顏色和寬度，-webkit-text-fill-color實現字體的顏色，和css的color一樣

<div class="font">剛吃完了就坐着，你不長肉誰長肉。</div>

.font{
				 font-size: 40px;
				 -webkit-text-stroke-width:1px;
				-webkit-text-stroke-color:pink;
				-webkit-text-fill-color: grey;
			}

需要注意的是：目前這兩個屬性只有webkit內核的Safari和Chrome支持

效果如圖：

 

第二種方法：用canvas畫描邊

<canvas id="myCanvas" width="1000px" height="200px" >
您的瀏覽器不支持canvas標簽。
</canvas>

　　

var canvas = document.getElementById("myCanvas");
			//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
			if(canvas.getContext) {
				//獲取對應的CanvasRenderingContext2D對象(畫筆)
				var ctx = canvas.getContext("2d");
				//設置字體樣式
				ctx.font = "90px Courier New";
				//設置描邊顏色
				ctx.strokeStyle = "blue";
				//設置描邊寬度
				ctx.lineWidth=2;
				//設置字體顏色
				ctx.fillStyle="yellow";
				//從坐標點(50,50)開始繪制文字
				ctx.strokeText("1234567890", 50, 100);
				ctx.fillText("1234567890", 50, 100);//50,50是left和top
			}

效果如圖：

好啦。就到這里。