金属字可以用金属色渐变实现。
金属字可以应用于硬朗冷峻、现代科技感的场景，比如《检察风云》、《环太平洋》等。
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>金属字</title>
<style>
html{height: 100%;overflow: hidden;}
body{height: 100%;margin: 0;}
#canvas{
background: #ddd;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas=document.getElementById('canvas')
//canvas充满窗口
canvas.width=window.innerWidth
canvas.height=window.innerHeight
//画笔
const ctx=canvas.getContext('2d')
//文字内容
const text='HEAVY METAL'
//文字对齐
ctx.textAlign='left'
ctx.textBaseline='top'
//字体属性
const fontSize=120
ctx.font=`italic bold ${fontSize}px arial`
//文字宽度
const {width}=ctx.measureText(text)
//位移坐标系
ctx.translate((canvas.width-width)/2,200)
//描边文字
{
ctx.save()
ctx.shadowColor='rgba(0,0,0,0.5)'
ctx.shadowOffsetY=5
ctx.shadowBlur=3
const gradient=ctx.createLinearGradient(
0,0,0,fontSize
)
gradient.addColorStop(0,'#49474b')
gradient.addColorStop(1,'#696970')
ctx.strokeStyle=gradient
ctx.lineWidth=10
ctx.strokeText(text,0,0)
ctx.restore()
}
//描边文字
{
ctx.save()
const gradient=ctx.createLinearGradient(
0,0,0,fontSize
)
gradient.addColorStop(0,'#868487')
gradient.addColorStop(0.3,'#3d3b3e')
gradient.addColorStop(1,'#fff')
ctx.strokeStyle=gradient
ctx.lineWidth=5
ctx.strokeText(text,0,0)
ctx.restore()
}
//填充文字
{
ctx.save()
const gradient=ctx.createLinearGradient(
0,0,0,fontSize
)
gradient.addColorStop(0,'#9d9d9d')
gradient.addColorStop(0.3,'#ffffff')
gradient.addColorStop(0.6,'#3e3f41')
gradient.addColorStop(1,'#67686b')
ctx.fillStyle=gradient
ctx.fillText(text,0,0)
ctx.restore()
}
</script>
</body>
</html>
注：在绘制描边文本时，文字的拐角越小，其厚度越大，如本案例中的“M”字母。
我们可以使用lineJoin，或者miterLimit属性解决这个尖角过大的问题：
1.ctx.lineJoin='bevel'
2.ctx.miterLimit=4
效果如下：
