这是模拟器效果
这是真机效果
下面是代码：
WXML：
<view class="bg_theme"> <view class="head_title">生长评价</view> <view class="flex-tab"> <view class="toptab {{currentNavtab==idx ? 'active' : ''}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="switchTab"> {{itemName}} </view> </view> <view class="canvasView"> <view class="canvas_bg"> <canvas canvas-id="mycanvas" class="canvas" /> </view> </view> <view class="tipLabel">采用世卫组织儿童生长标准,评价结果仅供参考</view></view> |
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, ageItemHeight*i); ctx.lineTo(allWidth, ageItemHeight*i);}for (let i = 0; i < ageNum; i++) {// 竖线
} // 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拉
