小程序
小游戏
企业微信
微信支付
扫描小程序码分享
https://developers.weixin.qq.com/community/develop/doc/000206085a81e05fef1e87ec851400
看见之前反馈过
ios安卓开发者工具都正常,真机模拟(pc小程序)和pc小程序时候都空白,看显示wxfile://temp/地址
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
图片太大导致的,把图片缩小试试。还不行的话一句句调试,看看哪步导致画不出来了。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
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) } }) }) }
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
图片太大导致的,把图片缩小试试。还不行的话一句句调试,看看哪步导致画不出来了。
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) } }) }) }