这是模拟器效果

canvas设置scale在模拟器有效，真机无效

这是真机效果

canvas设置scale在模拟器有效，真机无效

下面是代码：

WXML：

生长评价 {{itemName}} 采用世卫组织儿童生长标准,评价结果仅供参考

WXSS

.toptab.active{ font-weight: bold; background-color: gray; display: flex; align-items: center; justify-content: center; width: 30%; height: 80rpx; /文字下面加线 border-bottom: solid 3px #ed7321;/} .toptab{ background-color: lightgray; display: flex; align-items: center; justify-content: center; width: 30%; height: 80rpx; /* 动画 / border-bottom: solid 3px transparent; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; / Firefox 4 / -webkit-transition: all 0.4s ease-in-out; / Safari 和 Chrome / -o-transition: all 0.4s ease-in-out; / Opera */} .flex-tab{ margin: 40rpx; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;} .canvasView { margin-top: 40rpx; display: flex; justify-content: center;} .canvas_bg { background-color: white; height: 320px; width: 320px;} .canvas{ height: 640px; width: 640px; transform: scale(0.5) translate(-320px, -320px);} .tipLabel { font-size: 8pt; margin-top: 10rpx; margin-left: 40rpx;}

JS文件

const ctx = wx.createCanvasContext(‘mycanvas’);const allWidth = 640;const ageNum = 5;const yNum = 5;const itemLeft = 40;const itemBottom = 40;const ageItemWidth = (allWidth - itemLeft) / ageNum;const ageItemHeight = (allWidth - itemBottom) / yNum; ctx.beginPath(); // 开始创建一个路径，需要调用fill或者stroke才会使用路径进行填充或描边。ctx.setLineWidth(1);for (let i = 1; i <= yNum; i++) {// 横线 ctx.moveTo(itemLeft, ageItemHeighti); ctx.lineTo(allWidth, ageItemHeighti);}for (let i = 0; i < ageNum; i++) {// 竖线 ctx.moveTo(ageItemWidthi + itemLeft, 0); ctx.lineTo(ageItemWidthi + itemLeft, allWidth - itemBottom);} // 2.画单位ctx.setFontSize(16);for(let i=0; i<=yNum; i++){ ctx.fillText(${120-i*15}cm, 0, ageItemHeight * i + 20); ctx.fillText(${i}Years, ageItemWidth * i, allWidth - 5);} ctx.drawImage(/Asset/${isBoy? "boy":"girl"}AgeHeight.png, itemLeft, 0);ctx.stroke(); // stroke一次画一次，只是没有显示出来ctx.draw();

重点是**：**

.canvas{

  height``: 640px``;

  width``: 640px``;

  transform: scale(``0.5``) translate(``-320px``, -320px``);

}

这个设置在真机上无用啊

大神帮忙看看啊

网友回复：

大***：

canvas无法使用css的transform属性，你要是想使用transform相关属性，应该调用cavans的相关方法，scale，translate之类的。

海***：

这个样式里面去掉scale

.canvas{

  height``: 640px``;

  width``: 640px``;

}

然后在JS里面的  `ctx.beginPath(); 前面写上  ctx.scale(0.5, 0.5);就ok拉`

爱盈利（aiyingli.com）移动互联网具影响力的盈利指导网站。定位于服务移动互联网创业者，移动盈利指导。我们的目标是让盈利目标清晰可见！降低门槛，让缺乏经验、资金有限的个人和团队获得经验和机会，提高热情，激发产品。