用不了的。
canvas 字体canvas中怎么使用 loadFontFace加载后的字体
2019-03-12fillRect ->arc -> fill -> draw -> wx.canvasToTempFilePath( 在draw回调里面调用)
canvas 如何生成中心圆 的正方形型图片 而且背景要白色生成如下如图片 1.保存后图片为白底(开发工具中默认为白色,手机上是黑色的) [图片]
2019-03-11直接360度圆分5份,然后用sin, cos 求每个边的x,y轴坐标, 然后连起来不就行了, 不需要用这么复杂的旋转坐标。
canvas中的rotate是不是不能影响到lineTo- 当前 Bug 的表现(可附上截图) [图片] 结果如下 [图片] - 预期表现 [图片] 在h5中没问题 - 复现路径 - 提供一个最简复现 Demo <canvas canvas-id='myCanvas' style='width:180rpx ;height:180rpx;'></canvas> //绘制五边形 const ctx = wx.createCanvasContext('myCanvas'); ctx.beginPath(); ctx.translate(45, 45); ctx.moveTo(0, 0); ctx.lineTo(0, -45); for (var i = 0; i < 5; i++) { ctx.rotate(72 * Math.PI / 180); ctx.lineTo(0, -45); } ctx.stroke(); ctx.draw();
2019-03-11手动写代码判断 换行。
安卓系统和IOS中对canvas相关文本展示不同[图片] 这是IOS 支持文本换行符, [图片] 这是安卓系统不支持换行符? 请求解决意见,急急急....急急如意令
2019-03-08"disableScroll": true, 增加到 .json里面
苹果手机禁止页面的默认滚动,有什么办法,canvas里面画的东西都飘走了,苹果手机禁止页面的默认滚动,有什么办法,canvas里面画的东西都飘走了,
2019-03-07.draw() 是异步的, 在draw()的回调函数里面保存图片
将两个canvas中的数据放在一个canvas中合成一张图片- 当前 Bug 的表现 canvasA、canvasB,在canvasB中进行无规则裁剪操作,使用canvasToTempFilePath API把canvasB指定区域的内容导出生成指定大小的图片,将导出的图片使用drawImage API绘制到canvasA中,再使用drawImage API绘制一张图片到canvasA中,两次都使用draw(true)进行绘制,最后使用canvasToTempFilePath API把canvasA指定区域的内容导出生成指定大小的图片。 // 将裁剪画布内容保存 wx.canvasToTempFilePath({ x: 0, y: 0, width: 320, height: 320, destWidth: 320, destHeight: 320, canvasId: 'clipCanvas', success: res => { //清洗相框画布 //frameCanvas.clearRect(0, 0, 320, 320); console.log('裁剪图:'+res.tempFilePath); // 绘制裁剪图到相框画布 frameCanvas.drawImage(res.tempFilePath, 0, 0, 320, 320); frameCanvas.draw(); // 绘制相框图到相框画布 console.log('相框图:'+this.data.framePic); frameCanvas.drawImage(this.data.framePic, 0, 0, 320, 320); frameCanvas.draw(true); // 保存相框画布内容为图片 wx.canvasToTempFilePath({ x: 0, y: 0, width: 320, height: 320, destWidth: 320, destWidth: 320, canvasId: 'frameCanvas', success: res => { console.log('合成图:'+res.tempFilePath); // 关闭裁剪层,更新数据 this.setData({ clipImagePath: res.tempFilePath, isClip: false }); // 将裁剪图绘制到产品上 this.drawClipImageToGoods(); } }, this); } }, this); [图片][图片] [图片] 真机测试iOS和Android都没有问题,开发工具有问题。
2019-03-06你在 ctx.clip() 前面先调用下ctx.fill() 试试 ,
CanvasContext.arc/clip画圆形头像,切不完整- 当前 Bug 的表现(可附上截图) [图片] [图片] - 预期表现 头像应该切成圆的啊。不知道是CanvasContext.arc的问题还是CanvasContext.clip的问题还是啥问题 - 复现路径 - 提供一个最简复现 Demo
2019-03-05用阿里的oss, 自带水印功能 。 https://help.aliyun.com/document_detail/44957.html?spm=a2c4g.11186623.4.4.580a35a8EonTzA
通过图片链接加水印现在有一个需求,小程序内的一些教育图片被员工转发,给别人,希望可以动态加水印保护版权,服务器可以是谁转发的,对转发的员工进行处罚,技术要求是,动态在图片是生成一个水印码,服务器记录下这个吗?然后根据这个被转发的图片,找到相关的负责人 这样的功能可以在下程序上实现吗?
2019-03-04自己做一个 异步函数调用的管理队列,再加一个定时器定时检测队列。
云函数中的异步函数不能长时间挂在后台执行嘛?想要写一个云函数,可以定时发送模板消息 目前的思路是把发送云函数的代码放在setTimeout()里面定时执行 但是这个函数是异步的 当使用Promise包装异步函数后,如果延迟时间只有几秒钟,那么可以收到模板通知(在手机上测试的)。但是如果时间稍长,比如60s,就无法成功。而且用Promise包装的话,不合理,不可能让小程序一直等待云端的函数全部执行完吧。 如果不使用Promise包装的话,貌似任何异步函数都不会执行,无论是setTimeout(),还是request() 所以这个问题目前有没有解决方案呢? 这个功能,在bmob云上面是可以实现的(不需要使用Promise包装),但是bmob云的云函数只能免费使用40天T-T
2019-02-22this.CalculateText=function(text,width) { var aryText=[]; var outText=''; var word=null,preWord=null; for(var i=0;i<text.length;++i) { word=text[i]; if (word=='\r') //换行 { aryText.push(outText); outText = ''; } else if (word=='\n') { if (preWord!='\r') //\r\n 不处理 { aryText.push(outText); outText = ''; } } else { outText+=text[i]; var textWidth = this.Canvas.measureText(outText).width; if (textWidth>=width) { aryText.push(outText); outText=''; } } preWord = word; } if (outText.length > 0) aryText.push(outText); console.log(aryText) return aryText; }
canvas绘图文字换行,第一行文字少计算一个字宽度[代码]/**[代码][代码] [代码][代码]* 绘制多行文本[代码][代码] [代码][代码]* @param ctx canvas对象[代码][代码] [代码][代码]* @param str 文本[代码][代码] [代码][代码]* @param leftWidth 距离左侧的距离[代码][代码] [代码][代码]* @param initHeight 距离顶部的距离[代码][代码] [代码][代码]* @param titleHeight 文本行高[代码][代码] [代码][代码]* @param canvasWidth 文本区宽度[代码][代码] [代码][代码]* @returns {*}[代码][代码] [代码][代码]*/[代码][代码] [代码][代码]drawText: [代码][代码]function[代码] [代码](ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {[代码][代码] [代码][代码]let lineWidth = 0;[代码][代码] [代码][代码]let lastSubStrIndex = 0; [代码][代码]//每次开始截取的字符串的索引[代码][代码] [代码][代码]for[代码] [代码](let i = 0; i < str.length; i++) {[代码][代码] [代码][代码]lineWidth += ctx.measureText(str[i]).width;[代码][代码] [代码][代码]if[代码] [代码](lineWidth > canvasWidth) {[代码][代码] [代码][代码]ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); [代码][代码]//绘制截取部分[代码][代码] [代码][代码]initHeight += titleHeight; [代码][代码] [代码][代码]lineWidth = 0;[代码][代码] [代码][代码]lastSubStrIndex = i;[代码][代码] [代码][代码]}[代码][代码] [代码][代码]if[代码] [代码](i == str.length - 1) { [代码][代码]//绘制剩余部分[代码][代码] [代码][代码]ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码]},[代码][代码] [代码][代码]onLoad: [代码][代码]function[代码] [代码](options) {[代码][代码] [代码][代码]const ctx = wx.createCanvasContext([代码][代码]'scene'[代码][代码]);[代码][代码] [代码][代码]const canvasWidth = 300;[代码][代码] [代码][代码]const canvasHeight = 400;[代码][代码] [代码][代码]const bgColor= [代码][代码]'#577C8A'[代码][代码];[代码][代码] [代码][代码]//开始绘制背景区[代码][代码] [代码][代码]ctx.setFillStyle(bgColor)[代码][代码] [代码][代码]ctx.fillRect(0, 0, canvasWidth, canvasHeight)[代码][代码] [代码][代码]//开始绘制文字区[代码][代码] [代码][代码]ctx.setFontSize(18);[代码][代码] [代码][代码]ctx.setFillStyle([代码][代码]'#fff'[代码][代码]);[代码][代码] [代码][代码]let str = [代码][代码]'哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈'[代码][代码];[代码][代码] [代码][代码]this[代码][代码].drawText(ctx, str, 50, 200, 22, 200);[代码][代码]// 调用行文本换行函数[代码] [代码] [代码][代码]ctx.draw()[代码][代码]},[代码]用canvas做文本换行的时候 第一行的长度总是少了一个字的宽度呢?
2019-02-22