公司做的游戏页面,房间号要有描边。然后我就开始尝试,写了两种办法:
第一种: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
}
效果如图:
好啦。就到这里。