在浏览一些字体网站的时候，会发现他们的“字体生成器”和预览功能很好奇，为什么输入框输入文字之后，点击预览，
下面都会修改对应的字体内容，以便达到了没有安装字体也可以预览这个字体效果的目的。比如下图。
其实这个功能不难，原理很简单，就是通过js动态修改字体样式，然后用canvas渲染出字体，将图片的src路径替换，就实现了我们想要的目的。光说不练假把式，为了快速实现功能我没有用原生js或jquery，直接用了VUE的表单双向绑定特效，
实现步骤：
1.网页头部引入Vue文件，https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js，并写好HTML布局结构。如下
<div class="wrapper"><textarea name="" v-model="msg" ></textarea><select name="" v-model="font"><option value="微软雅黑">微软雅黑</option><option value="宋体">宋体</option></select><input type="number" name="" v-model="fontSize" /><input type="color" name="" v-model="fontCor" /><button @click="creatImg">生成</button><div class="fontimg"><img id="imgbox" :src="imgSrc"/></div></div><div class="wrapper"> <textarea name="" v-model="msg" ></textarea> <select name="" v-model="font"> <option value="微软雅黑">微软雅黑</option> <option value="宋体">宋体</option> </select> <input type="number" name="" v-model="fontSize" /> <input type="color" name="" v-model="fontCor" /> <button @click="creatImg">生成</button> <div class="fontimg"> <img id="imgbox" :src="imgSrc"/> </div> </div><div class="wrapper"> <textarea name="" v-model="msg" ></textarea> <select name="" v-model="font"> <option value="微软雅黑">微软雅黑</option> <option value="宋体">宋体</option> </select> <input type="number" name="" v-model="fontSize" /> <input type="color" name="" v-model="fontCor" /> <button @click="creatImg">生成</button> <div class="fontimg"> <img id="imgbox" :src="imgSrc"/> </div> </div>
2.绑定vue元素，设置data初始数据，代码中有相应注释，可详细参考。
实现功能：
<script type="text/javascript">var app = new Vue({el:".wrapper",data:{msg:"你好，这里是测试的内容",font:"微软雅黑",fontSize:'18',fontCor:"#000000",imgSrc:''},methods:{creatImg:function(){this.drawLogo(this.msg,this.font);},drawLogo: function(text, font) {// 创建画布let canvas = document.createElement('canvas');// 绘制文字环境let context = canvas.getContext('2d');// 设置字体context.font = font;// 获取字体宽度let width = context.measureText(text).width;// 如果宽度不够 240if (width < 240) {width = 600;} else {width = width + 30;}// 画布宽度canvas.width = width;// 画布高度canvas.height = 80;// 填充白色context.fillStyle = '#ffffff';// 绘制文字之前填充白色context.fillRect(0, 0, canvas.width, canvas.height);// 设置字体context.font = this.fontSize+"px "+font;// 设置水平对齐方式context.textAlign = 'center';// 设置垂直对齐方式context.textBaseline = 'middle';// 设置字体颜色context.fillStyle = this.fontCor;// 绘制文字（参数：要写的字，x坐标，y坐标）context.fillText(text, canvas.width / 2, canvas.height / 2);// 生成图片信息let dataUrl = canvas.toDataURL('image/png');this.imgSrc = dataUrl;return dataUrl;},}})</script><script type="text/javascript"> var app = new Vue({ el:".wrapper", data:{ msg:"你好，这里是测试的内容", font:"微软雅黑", fontSize:'18', fontCor:"#000000", imgSrc:'' }, methods:{ creatImg:function(){ this.drawLogo(this.msg,this.font); }, drawLogo: function(text, font) { // 创建画布 let canvas = document.createElement('canvas'); // 绘制文字环境 let context = canvas.getContext('2d'); // 设置字体 context.font = font; // 获取字体宽度 let width = context.measureText(text).width; // 如果宽度不够 240 if (width < 240) { width = 600; } else { width = width + 30; } // 画布宽度 canvas.width = width; // 画布高度 canvas.height = 80; // 填充白色 context.fillStyle = '#ffffff'; // 绘制文字之前填充白色 context.fillRect(0, 0, canvas.width, canvas.height); // 设置字体 context.font = this.fontSize+"px "+font; // 设置水平对齐方式 context.textAlign = 'center'; // 设置垂直对齐方式 context.textBaseline = 'middle'; // 设置字体颜色 context.fillStyle = this.fontCor; // 绘制文字（参数：要写的字，x坐标，y坐标） context.fillText(text, canvas.width / 2, canvas.height / 2); // 生成图片信息 let dataUrl = canvas.toDataURL('image/png'); this.imgSrc = dataUrl; return dataUrl; }, } }) </script><script type="text/javascript"> var app = new Vue({ el:".wrapper", data:{ msg:"你好，这里是测试的内容", font:"微软雅黑", fontSize:'18', fontCor:"#000000", imgSrc:'' }, methods:{ creatImg:function(){ this.drawLogo(this.msg,this.font); }, drawLogo: function(text, font) { // 创建画布 let canvas = document.createElement('canvas'); // 绘制文字环境 let context = canvas.getContext('2d'); // 设置字体 context.font = font; // 获取字体宽度 let width = context.measureText(text).width; // 如果宽度不够 240 if (width < 240) { width = 600; } else { width = width + 30; } // 画布宽度 canvas.width = width; // 画布高度 canvas.height = 80; // 填充白色 context.fillStyle = '#ffffff'; // 绘制文字之前填充白色 context.fillRect(0, 0, canvas.width, canvas.height); // 设置字体 context.font = this.fontSize+"px "+font; // 设置水平对齐方式 context.textAlign = 'center'; // 设置垂直对齐方式 context.textBaseline = 'middle'; // 设置字体颜色 context.fillStyle = this.fontCor; // 绘制文字（参数：要写的字，x坐标，y坐标） context.fillText(text, canvas.width / 2, canvas.height / 2); // 生成图片信息 let dataUrl = canvas.toDataURL('image/png'); this.imgSrc = dataUrl; return dataUrl; }, } }) </script>
这样小功能就实现，就没有引入太多字体，仅仅用了大家电脑都有字体：雅黑和宋体，更多效果自行测试吧！
© 版权声明
THE END
暂无评论内容