如何使用Canvas（微信小程序中制作海报的软件）在小程序中绘制海报

2020 年第一篇文章。 年初的时候，忙着复习、答题，根本没有时间写东西。 书读得越多，我就越觉得自己的技术越来越差。 我一直是一个初学者。 我碰巧有一个最近项目的画布。 这个业务突然重新点燃了我的UI前端火，我写下了一些陷阱和想法。

陷阱问题一：为什么画布上绘制的图片模糊？

在画布上绘制图片或文字时，将画布的宽度和高度设置为375*667。 可以看到绘制的图片非常模糊，感觉像是低分辨率的图片，而且文字也显得模糊。 可能会有一些层次感。

原因：在前端开发中，知道有一个属性，叫做devicePixelRatio。 该属性决定了渲染界面时用于单独渲染设备的物理像素数（通常为 2）。 像素。

例如，对于100*100像素的图像，2个像素用于在Retina屏幕上渲染图像的1个像素。 这相当于将图像加倍，因此图像如下所示： 它变得模糊，因此视网膜屏幕上的每个像素都变得更厚。

解决方案：使用样式将canvas-width和canvas-height增加2x，并将canvas显示宽度和高度减少2x。

示例：

问题2：如何处理px和rpx之间的转换

rpx是唯一的尺寸单位，可以根据情况进行调整？屏幕的宽度。 在iPhone6/iphonex上，1rpx对应不同的px。 因此，画布在不同手机上的显示可能不一致。

在画海报之前，我们收到的设计稿一般都是基于iPhone 6两倍大的图片。 从上一题的解法中我们也知道，画布的尺寸也增大了一倍。 因此，可以直接测量两倍于图片尺寸的设计方案，直接绘制画布，但需要注意rpxtoPx的尺寸。

/** * * @param {*} rpx * @param {*} int //是否为整数 => 0.5 //iphone6 PixelRatio => 2 像素比例 */toPx(rpx, int) { if (int) { return parseInt(rpx * this.pixel * this .Ratio ) } return rpx * this.factor * this.pixelRatio }问题3：如果CanvasContext.measureText计算的是纯数字，那么在移动设备上将为0。

this.ctx.measureText(text).width 小程序计算文本的长度，但如果您使用所有数字，您将看到 API 始终将其计算为 0。 因此，我们最后使用模拟的MeasureText方法来计算文本的长度。

measureText(text, fontSize = 10) { text = String(text) text = text.split('') let width = 0 text.forEach(function(item) { if (/[a-zA) -Z]/.test(item)) else if (/-/.test(item)) { width += 3.25 } else if (/[\u4e00-\u9fa5 ]/.test(item) ） ） { // 中国人匹配 width += 10 } else if (/\(|\)/.test(item)) { width += 3.73 } else if (/\s/.test(item)) { width += 2.5 } else if ( /%/.test (item)) {width+= 8} else {width+= 10}) return width*fontsize/10} 问题4：如何让字体行居中？

如果字体太长，就会超出画布，绘图看起来不美观。 在这种情况下，额外的部分将如下所示： 您可以设置宽度并循环计算以计算文本的宽度。 如果超出这个范围，则在截取子字符串并附加后使用......就是这样。

let fillText=''let width = 350for (let i = 0; i = width) { FillText.Substring(0, FillText.Length -)+ '...}} if (LINE

文字剧中的显示公式：

-的宽度（文字宽度）/2 + x（x为字体的x轴位移）

let w = this.measureText(text, this.toPx(fontSize, true))this.ctx.fillText(text, this.toPx((this.canvas.width - w) / 2 + x), this.toPx(y + (lineHeight || fontSize) *index)) 问题5：如何在小程序中处理网络图 

 如何在小程序中处理网络图像，例如CDN上的图像？使用时需要接入微信进行本地LRU管理，以便后续绘制同一张图片时可以节省下载时间。    因此，首先需要为微信小程序后台的downloadFile配置一个合法的域名。  然后，在画布上绘图之前，建议提前下载图像并等待图像下载后再开始绘制，以避免出现绘制失败的问题。    
问题6：IDE中可以设置Base64图像数据进行绘图，但在实际设备上没有用吗？    
首先，将base64转换为Uint8ClampedArray格式。    然后通过wx.canvasPutImageData(OBJECT, this)在画布上进行绘制，并将画布导出为图像。    
问题6：如何绘制圆形图片？ 问题7：关于wx.canvasToTempFilePath
使用Canvas绘制成功后，直接调用该方法生成图像。   在IDE上没有问题，但在实际设备上生成的镜像会不完整。   可以使用setTimeout来解决这个问题。    问题。    
this.ctx.draw(false, () => { setTimeout(() => { Taro.canvasToTempFilePath({ CanvasId: 'canvasid', success: async(res))) => { this.props.onsavePoster(res.tempfilepath) // 回调事件 // 清除画布 this.ctx.clearrect(0, 0, canvas_width, canvas_height).    呃）}}，这个。   $scope)}, time)}) 问题 8：关于 CanvasContext.font 
 字体大小不能使用十进制数字。  如果字体大小部分包含小数，则整个 FONT 设置将失效。    
问题 9：Android 上字体渲染是否未对齐？ 
Android 智能手机上会出现此问题，iOS 上则正常。    当我第一次看到这个问题时，我不明白为什么有些在中间，有些在前面。    后来发现Android的this.ctx.setTextAlign(textAlign)默认是居中的，这造成了一些混乱。  当我把它改为左边时，它就变得正常了。    
问题10：绘制折线图
使用画布绘制简单的折线图。   只需使用 lineTo 和 moveTo API 连接点即可。    使用 createLinearGradient 绘制阴影。    思考一：使用json配置表生成海报的局限性
如今的海报生成只需要根据设计方案测量尺寸即可，但测量过程还是很繁琐的。    您必须在各处手动调整它。    后期还可以通过拖拽的方式在Web端完成设计方案，自动生成json，应用到小程序海报上。    
思考2：后端生成海报的局限性 
海报最初是后端的学生是的，优点是不需要前端绘图时间，也不用踩微信API的陷阱。  接口返回一个URL，可以显示。  但在后端产生的效果并不好。  毕竟这种工作比较前端。    
想法三：前端生成海报的局限性
前端生成海报时，可能需要将图片下载到本地或者使用Android专用的setTimeout来保证正常绘制。这需要很多时间。   。    各种兼容性问题，手机、Android、iOS等上的DPR不停的彩蛋要秃了~哈哈哈哈~
 彩蛋用的是最新的Canvas- 2D背景图 真的可以吗？你不把它们都画出来吗？    
提醒一下，在Canvas的开发过程中，小程序中始终存在着一丝曙光。    
我也尝试了最新的canvas2d API，果然和web端同步了，书写变得更流畅了。  在开发者工具中一切看起来都很好，但是当我在手机上运行它时，它只显示一半的宽度。    对于不同型号的测试也是如此。    
您可以稍后将其更改为原始画布。    。    。    具体原因目前微信社区尚未找到。  我们会在未来的迭代和升级中考虑它。    
推荐教程：《JS教程》
 PHP快速学习视频免费教程（从初学者到高手）
如何学习PHP？    我该如何开始学习PHP？我应该从哪里学习PHP？如何快速学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。  您可以保存并下载您想学习的朋友。    
 下载
			


    			
这几篇文章你可能也喜欢：
                 

                                            
微信小程序翻译功能上线：现已支持18种语言
                                            
如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
                                            
微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
                                            
微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
                                            
如何调节微信小程序的亮度？
                                        
                        

                        本文由主机参考刊发，转载请注明：如何使用Canvas（微信小程序中制作海报的软件）在小程序中绘制海报 https://zhujicankao.com/123849.html