1
YorkWong 203 天前
一切以真机为准
|
3
HTML001 203 天前
小程序就这样,某些 API 在 IOS 和安卓表现不一样,在真机和开发者工具不一样,在不同版本的微信上面表现不一样,一些冷门 API 最容易出现这些问题
|
4
Grapevine 203 天前
小程序真的是毒瘤。。
|
5
toesbieya 203 天前
canvas 2d 用 toDataURL 获取 base64 然后自己写入本地文件
大很多可能移动设备 dpi 较高,自己缩放 canvas |
6
xiaohantx OP @toesbieya 我输出 devicePixelRatio 的值我看完全一样,width,height 也都一样就很疑惑,写入本地文件的时候是否会向用户申请写入权限。。
|
7
xiaohantx OP ```
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) } }) }) } ``` |
8
lukesy 203 天前
这个 api 没有问题的
|
9
lukesy 203 天前
你如果要做海报 你直接用这个 https://github.com/Kujiale-Mobile/Painter
|
10
Ashore 203 天前
我用的这个 https://kiccer.github.io/wx-canvas-2d/ 感觉还可以。
uniapp 可以用这个 https://ext.dcloud.net.cn/plugin?id=2389 |
11
toesbieya 202 天前
uniapp 啊 他那个 canvas 自己有做缩放,h5 上自己创建 canvas 元素应该就正常了
|
12
yuyuf 202 天前
空白问题可能是 canvas 还没有绘制完成。可以调用 cavnas.draw() 后,暂停 200ms, 再调 canvasToTempFilePath
分辨率问题,尽量手动设置 canvas 的大小,还有 destWidth ,destHeight 这两个参数 |