特效比漂亮的网站,企业网站首页,查失信被执行人名单查询,自己做的网站怎么才能在百度上查找canvas遇到的坑 1.文字换行 2.真机不能使用网络数据图片#xff08;真坑#xff09; 点击显示效果我就不写了#xff0c;你们可以自己加一下 全部代码贴出来 css#preview {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);position: fixed;z-index: 999;top: 0;ov…canvas遇到的坑 1.文字换行 2.真机不能使用网络数据图片真坑 点击显示效果我就不写了你们可以自己加一下 全部代码贴出来 css#preview {width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);position: fixed;z-index: 999;top: 0;overflow: hidden;bottom: 0;}#preview button {width: 43%;position: absolute;bottom: 218rpx;left: 28%;z-index: 5;border-radius: 37rpx;height: 66rpx;line-height: 66rpx;background: #fd5b4c;}#preview image {width: 87%;position: absolute;top: 8%;left: 6%;z-index: 3;border-radius: 19rpx;}#preview .hide1 image {width: 10%;height: 6%;position: absolute;right: 0;left: 84%;}#preview text {position: absolute;bottom: 170rpx;left: 25%;z-index: 5;font-size: 22rpx;color: gainsboro;}canvas { position: fixed;top: 0;left: 10000rpx;}wxmlcanvas canvas-idshareImg stylewidth:545px;height:771px;/canvas view hidden{{hidden}} idpreview classhide1{{show1?:show}}image src{{prurl}} modewidthFix/imagebutton typeprimary sizemini bindtapsave保存分享图/buttontext保存后可以从手机相册分享到朋友圈/textview classhide1{{show1?:show}} bindtaponTapimage src../../images/Close.png/image/view/viewjsgetData() {/*商品详情接口数据代码省略*///下载图片var that this;wx.downloadFile({ //需要小程序后台添加downloadFile域名url: res.result.product.images[0].url, //接口返回数据type: image, //类别success: function (res) {var _avatarPath res.tempFilePathconst ctx wx.createCanvasContext(shareImg);var imgPath _avatarPath //商品图console.log(imgPath)var bgImgPath ../../images/qrcode.jpg; //二维码图ctx.setFillStyle(white)ctx.fillRect(0, 0, 6000, 2800);ctx.drawImage(imgPath, 120, 30, 320, 320);ctx.drawImage(bgImgPath, 40, 500, 120, 110);ctx.setFontSize(22)ctx.beginPath()var lineWidth 0;var canvasWidth 300;var initHeight 380;var lastSubStrIndex 0;ctx.setFillStyle(black)var str that.data.product.title //商品价格名称ctx.fillText(长按识别图中的小程序码, 190, 540)ctx.fillText(查看详情, 190, 580)//文字换行 这个地方有可能报错注释掉就可以for (let i 0; i str.length; i) {lineWidth ctx.measureText(str[i]).width;if (lineWidth canvasWidth) {ctx.fillText(str.substring(lastSubStrIndex, i), 18, initHeight); //绘制截取部分initHeight 34; //文字行高lineWidth 0;lastSubStrIndex i;}if (i str.length - 1) {//绘制剩余部分ctx.fillText(str.substring(lastSubStrIndex, i 1), 18, initHeight);}}ctx.setFillStyle(red)ctx.fillText(that.data.product.price, 460, 380) //that.data.product.price 商品价格数据ctx.setStrokeStyle(gainsboro)ctx.strokeRect(20, 450, 510, 0.1)ctx.stroke()ctx.draw()}})
} 转载于:https://www.cnblogs.com/Zhangqwr/p/9044497.html
