<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas布艺效果</title>
<style>
body{margin: 0;overflow: hidden}
#test{background: antiquewhite;}
</style>
</head>
<body>
<canvas id="test"></canvas>
<script>
const cvs=document.getElementById('test');
cvs.width=window.innerWidth;
cvs.height=window.innerHeight;
const ctx=cvs.getContext('2d');
/*文字内容*/
const text='canvas';
/*文字位置*/
const [x,y]=[100,300];
/*字体属性,文字加粗,大小:200px,字体:arial*/
ctx.font='bold 200px arial';
/*投影,颜色:rgba(0,0,0,0.6),垂直偏移:2,模糊:4*/
ctx.shadowColor='rgba(0,0,0,0.6)';
ctx.shadowOffsetY=2;
ctx.shadowBlur=4;
/*填充文字,颜色:#a76921*/
ctx.fillStyle='#a76921';
ctx.fillText(text,x,y);
/*实线描边文字,颜色:#f0d5ac,线宽:8*/
ctx.lineWidth=8;
ctx.strokeStyle='#f0d5ac';
ctx.strokeText(text,x,y);
/*虚线描边文字,颜色:#333,线宽:1,线段长度[5,3]*/
ctx.lineWidth=1;
ctx.strokeStyle='#333';
ctx.setLineDash([5,3]);
ctx.strokeText(text,x,y);
</script>
</body>
</html>