小程序怎么用帆布绘制海报

　　介绍

这篇文章主要介绍小程序怎么用帆布绘制海报,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

踩坑 “标题”问题1:为什么在画布上画图片模糊吗?

在画布上绘制图片/文字的时候,我们设定画布:375 * 667的宽高,会发现绘制出来的图片很模糊,感觉像是一张分辨率很差的图片,文字看起来也会有叠影。

<人物> 小程序怎么用帆布绘制海报“> <figcaption> </figcaption> </图> <blockquote> <p>注意:物理像素是指手机屏幕上显示的最小单元,而设备独立像素(逻辑像素)计算机设备中的一个点,css中设置的像素指的就是该像素。</p> </引用> <p>原因:在前端开发中我们知道一个属性叫<代码> devicePixelRatio(设备像素比)> </代码,该属性决定了在渲染界面时会用几个(通常是2个)物理像素来渲染一个设备独立像素。</p> <p>举个例,一张100 * 100像素大小的图片,在视网膜屏幕下,会用2个像素点去渲染图片的一个像素点,相当于图片放大了一倍,因此图片会变得模糊,这也是1 px在视网膜屏上变粗的原因。</p> <人物> <img src= & lt; canvas 宽度=?20“,身高=?80“,风格=翱矶?160 px;高度:90 px;“祝辞& lt;/canvas> 问题2:如何处理px和rpx的转换?

rpx是小程序里特有的尺寸单位,可以根据屏幕的宽度进行自适应,而在iphone6/iphonex上,1 rpx等于不同的px。所以很可能会导致在不同手机下,你的画布展示不一致。

在绘制海报的之前,我们拿到的设计稿一般都是基于iphone6的2倍图。而且从上一个问题的解决,我们知道画布的大小也是2倍的,所以我们可以直接量取2倍图的设计稿直接绘制画布,而尺寸需要注意一下rpxtoPx。

 measureText(文本,fontSize =, 10), {
　　,,,text =,字符串(文本)
　　,,,text =, text.split (& # 39; & # 39;)
　　,,,let  width =0
　　,,,text.forEach(函数(项),{
　　,,,,,if  (/[a-zA-Z]/test(项),{
　　,,,,,,,width  +=7
　　,,,,,},else  if  (/[0 - 9]/test(项),{
　　,,,,,,,width  5.5 +=,
　　,,,,,},else  if  (/\/test(项),{
　　,,,,,,,width  2.7 +=,
　　,,,,,},else  if  (/,/test(项),{
　　,,,,,,,width  3.25 +=,
　　,,,,,},else  if  (/[\ u4e00 - \ u9fa5]/test(项),{,//中文匹配
　　,,,,,,,width  +=10
　　,,,,,},else  if  (/\ (| \)/test(项),{
　　,,,,,,,width  3.73 +=,
　　,,,,,},else  if  (/\ s/test(项),{
　　,,,,,,,width  2.5 +=,
　　,,,,,},else  if  (/%/test(项),{
　　,,,,,,,width  +=8
　　,,,,,},{else 
　　,,,,,,,width  +=10
　　,,,,,}
　　,,,})
　　,,,return  width  *, fontSize /10
　　以前,,} 问题4:如何保证一行字体的居中展示?多行呢?  
字体的如果过长,会超出帆布画布,造成绘制难看,这个时候我们就应该让超出的部分变成<代码>…你可以设置一个宽度并且循环计算计算出文本的宽度,如果超出则利用子字符串截取后补充<代码>…>   let  fillText=& # 39; & # 39;
　　let  width =350
　　for  (let 小姐:=,0;,小姐:& lt;=, text.length 作用;1;,我+ +),{,//将文字转为数组,一行文字一个元素
　　,,,,,,,fillText =, fillText  +,文本(我)
　　,,,,,,,//,判断截断的位置
　　,,,,,,,if  (this.measureText (fillText, this.toPx(字形大小,,真的),祝辞=,宽度),{
　　,,,,,,,,,if  (line ===, lineNum), {
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
小程序怎么用帆布绘制海报