Taro中使用canvas
需要用setTimeout延时绘制,否则可能会出现图片不显示
使用fillText()文字错位问题解决方案
const context = wx.createCanvasContext('firstCanvas'); context.fillText('以字生图',0, 0);
1
2
明明设置在左上角x和y轴0点处开始,但是却看不到了
Y轴偏移量错位一定是小程序的Bug
经过测试我发现,fillText(text,x, y),轴的y实际上不是指文字左上角
到画布零点的距离,而是指文字的左下角
到零点的距离。
所以我们只需要在原本想要设置的y轴上再加上文本的宽度就行了
const context = wx.createCanvasContext('firstCanvas');
const fontWidth= context.measureText('以').width;//获取文本宽度
context.fillText('以字生图', 0, 0 + fontWidth);//本来设置的0,现在需要加上fontWidth
1
2
3
2
3
- wx.canvasToTempFilePath()保存图片为空白图片?
一:需要加加延迟 二:画布过大在ios上会显示空白,三初始化画布大小必须同步,异步也会导致ios空白,
canvas drawImage绘制两张图片,只绘制成功一张
确保两张图片已经加载完成
绘制顺序问题:绘制的顺序会影响图片的显示顺序,后绘制的图片会覆盖先绘制的图片。请确保先绘制的图片不会被后绘制的图片覆盖。可以在绘制方法中先绘制第一张图片,然后再绘制第二张图片。
image1.onload = function() { context.drawImage(image1, x1, y1, width1, height1); // 绘制第一张图片后再绘制第二张图片 image2.onload = function() { context.drawImage(image2, x2, y2, width2, height2); }; };
1
2
3
4
5
6
7
上次更新: 2024/08/14, 04:14:33