之前写一个功能，里面用到了一些关于文字的描边，对于描边会有文字内描边和文字外边框描写，会有些迷糊，所以打算写下做个记录。
canvas中：
<body>
<canvas id="canvas" width="700" height="800"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//往文字上描边
ctx.lineWidth = 2;
ctx.font = "bold 100px serif";
ctx.fillStyle = 'red';
ctx.fillText("Hello world", 50, 200);
ctx.font = "bold 100px serif";
ctx.strokeStyle = 'blue';
ctx.strokeText("Hello world", 50, 200);
//往文字外描边
ctx.lineWidth = 2;
ctx.font = "bold 100px serif";
ctx.strokeStyle = 'blue';
ctx.strokeText("Hello world", 50, 400);
ctx.font = "bold 100px serif";
ctx.fillStyle = 'red';
ctx.fillText("Hello world", 50, 400);
</script>
</body>
样式：
1-1
可以看出fillText实心文字先绘制，strokeText空心文字后绘制，他们坐标一致，所以直接覆盖可实心文字，形成了像文字内部描边
css文字描边
<html>
<head>
<title>描边</title>
<style>
.text{
font-size: 100px;
color: red;
font-weight: bold;
}
.text1{
text-shadow: blue 4px 0 0, blue 0 4px 0, blue -4px 0 0, blue 0 -4px 0;
}
.text2{
-webkit-text-stroke: blue 4px;
}
</style>
</head>
<body>
<div>
<p class="text text1">Hello World</p>
<p class="text text2">Hello World</p>
</div>
</body>
</html>
1-2
通过text-shadow添加文字阴影可以形成对文字的外描边
text-shadow：
注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。
可以看下这个文章，关于text-shadow
网友评论