async onReady() {
await this.getConclusion()
uni.createSelectorQuery().select('#myCanvas').fields({
node: true,
size: true,
}).exec((res) => {
if (res && res[0]) {
const system = uni.getSystemInfoSync()
const w = system.windowWidth / 750
const canvas = res[0].node
const ctx = canvas.getContext('2d') // 渲染上下文
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = uni.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
ctx.clearRect(0, 0, width, height)
// 绘制个人标准差曲线图
// this.drawSelfStandardDeviation(ctx, w)
// 绘制个人常模标准差曲线图
console.log('是我这里错了吗')
this.drawNormData(ctx, w, width)
}
})
uni.createSelectorQuery().select('#myCanvas2').fields({
node: true,
size: true,
}).exec((res) =>{
if (res && res[0]) {
const system = uni.getSystemInfoSync()
const w = system.windowWidth / 750
const canvas = res[0].node
const ctx = canvas.getContext('2d') // 渲染上下文
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = uni.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
ctx.clearRect(0, 0, width, height)
this.drawPieChart(ctx, w, width, height)
}
})
},
这里测试的时候有一部ios的手机有这个问题，大部分机型没问题，想不明白这个有什么解决办法。
提供个复现的代码片段吧
<template><view class="container"><view class="charts-box"><canvas id="myCanvas" type="2d" style="width: 750rpx; height: 700rpx;" /></view><view class="circle-box"><canvas id="myCanvas2" type="2d" style="width: 750rpx; height: 800rpx;" /></view></view></template><script>export default {async onReady() {uni.createSelectorQuery().select('#myCanvas').fields({node: true,size: true,}).exec((res) => {if (res && res[0]) {const system = uni.getSystemInfoSync()const w = system.windowWidth / 750const canvas = res[0].nodeconst ctx = canvas.getContext('2d') // 渲染上下文// Canvas 画布的实际绘制宽高const width = res[0].widthconst height = res[0].height// 初始化画布大小const dpr = uni.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)ctx.clearRect(0, 0, width, height)}})uni.createSelectorQuery().select('#myCanvas2').fields({node: true,size: true,}).exec((res) =>{if (res && res[0]) {const system = uni.getSystemInfoSync()const w = system.windowWidth / 750const canvas = res[0].nodeconst ctx = canvas.getContext('2d') // 渲染上下文// Canvas 画布的实际绘制宽高const width = res[0].widthconst height = res[0].height// 初始化画布大小const dpr = uni.getWindowInfo().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr, dpr)ctx.clearRect(0, 0, width, height)