canvas 画字

Posted 2020-08-20 金玲

用canvas画字还是头一回，要想和UI设计的画的一模一样还是真有些苦难，不过现在实现的效果已经很像了。

<!--通过字体文件引入字体-->
<style>
@font-face {
font-family: TitilliumWeb-BoldItalic;
src: url(TitilliumWeb-BoldItalic.ttf);
}
@font-face {
font-family: TitilliumWeb-Light;
src: url(TitilliumWeb-Light.ttf);
}
</style>
<div>
<span style="font-family: TitilliumWeb-BoldItalic;">230ft<span>
<span style="font-family: TitilliumWeb-Light;">230ft<span>
</div>
<canvas id="textFont" height="2000px" width="1000px">

</canvas>
<script>
//获取dom节点
var c = document.getElementById("textFont");
//获取上下文
var ctx = c.getContext("2d");
//设置字体大小 及 字体类型 从定义好的字体中设置
ctx.font = "60px TitilliumWeb-Light";
//设置绘图的颜色
ctx.strokeStyle = ‘#ED2024‘;
//设置画笔填充颜色
ctx.fillStyle="#ED2024"；
//设置字体的比例 宽和高的比例
ctx.scale(1.1,1)
//画字体的边框 描边
ctx.strokeText("230ft",100,200);
//填充字体
ctx.fillText("230ft",100,200);
</script>