关于微信小程序 canvas 2d 的问题,感觉这块内容好少

[xiaohantx]

canvasToTempFilePath 这个 Api 在 Canvas 里转的文件不能显示吗？
ios 安卓开发者工具都正常，真机模拟(pc 小程序)和 pc 小程序时候都空白，看显示 wxfile://temp/地址

还有网页
https://cdnjson.com/image/image.8Guvk
小程序
https://cdnjson.com/image/image.8G2LB

为啥一套代码网页会大那么多。。。

非 2d 的好像还好，type="2d"这块感觉内容很少，canvasToTempFilePath 有 canvas 和 canvasId 两个参数，我看网页好像不支持 canvasid

[YorkWong]

一切以真机为准

[xiaohantx]

@YorkWong 就是真机下不统一呀....ios,安卓目前一样，pc 真机目前不显示，网页真机目前不知道为什么倍数放大

[HTML001]

小程序就这样，某些 API 在 IOS 和安卓表现不一样，在真机和开发者工具不一样，在不同版本的微信上面表现不一样，一些冷门 API 最容易出现这些问题

[Grapevine]

小程序真的是毒瘤。。

[toesbieya]

canvas 2d 用 toDataURL 获取 base64 然后自己写入本地文件
大很多可能移动设备 dpi 较高，自己缩放 canvas

[xiaohantx]

@toesbieya 我输出 devicePixelRatio 的值我看完全一样，width,height 也都一样就很疑惑，写入本地文件的时候是否会向用户申请写入权限。。

[xiaohantx]

```
const drawCanvas = (canvasId, data) => {
uni.createSelectorQuery().select(canvasId).fields({
node: true,
size: true
}).exec(res => {
// 处理数据
demoList[0].value = data.levelOne ?? 0
demoList[1].value = data.levelTwo ?? 0
demoList[2].value = data.levelThree ?? 0
const {
devicePixelRatio,
screenWidth
} = uni.getSystemInfoSync()
const rpx = devicePixelRatio
const canvas = res[0].node
let ctx = canvas.getContext('2d')
// 初始化画布大小
canvas.width = res[0].width * rpx
canvas.height = res[0].height * rpx
// 获取结束
const x = res[0].width / 2 * rpx;
const y = res[0].height / 2 * rpx;
const lineWidth = 20 * rpx;
const radius = (res[0].height / 2) * rpx - (lineWidth / 2) // 半径
const sumResult = canvasId === '#chart' ? data.errorTotal : data.alertTotal;
let startAngle = 0;
demoList.map(item => {
// 绘制数组中的百分比
ctx.beginPath();
console.log('sum', sumResult)
let angle = (item.value / sumResult) * 2 * Math.PI
ctx.arc(x, y, radius, startAngle, startAngle + angle);
ctx.lineWidth = lineWidth;
ctx.strokeStyle = item.color;
ctx.stroke();
startAngle += angle
})
// 文字颜色
ctx.fillStyle = "#1D2129"
ctx.font = `${30 * rpx}px sans-serif`
ctx.textAlign = 'center'
// // 文字位置
// // 插入文字
ctx.fillText(sumResult, canvas.width / 2, y)
// // 文字大小
ctx.fillStyle = "#86909C"
ctx.font = `${12 * rpx}px sans-serif`
ctx.textAlign = 'center'
// // 文字颜色
// // 插入文字
ctx.fillText('故障总计(台)', canvas.width / 2, y + (20 * rpx))
uni.canvasToTempFilePath({
canvas: canvas,
success: function(res) {
if (canvasId === '#chart') {
canvasSrc1.value = res.tempFilePath;
} else {
canvasSrc2.value = res.tempFilePath;
}
},
fail: function(res) {
console.log(222, res)
}
})
})
}
```

[lukesy]

这个 api 没有问题的

[lukesy]

你如果要做海报 你直接用这个 https://github.com/Kujiale-Mobile/Painter

[Ashore]

我用的这个 https://kiccer.github.io/wx-canvas-2d/ 感觉还可以。
uniapp 可以用这个 https://ext.dcloud.net.cn/plugin?id=2389

[toesbieya]

uniapp 啊 他那个 canvas 自己有做缩放，h5 上自己创建 canvas 元素应该就正常了

[yuyuf]

空白问题可能是 canvas 还没有绘制完成。可以调用 cavnas.draw() 后，暂停 200ms, 再调 canvasToTempFilePath
分辨率问题，尽量手动设置 canvas 的大小，还有 destWidth ，destHeight 这两个参数