1.问题1
canvas生成的二维码显示问题，第一章是安卓手机与模拟器效果，由于一维码跟二维码都是用canvas生成的，并且fixed到页面相应位置的。但是苹果手机显示就像第二张图那样，安卓没问题。模拟器与安卓效果如图一，苹果显示如2；
并且一维码二维码都有一个点击放大的功能。也是真机与安卓手机没毛病。苹果上面不行
2.问题2
如下所示，苹果手机上面背景可滑动且滑动时canvas组件位置发生偏移。安卓与开发工具显示正常。
4 个回答
请 登录 后发表内容
相关问题
相关文档
- Canvas.getContext: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#参数: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#功能描述: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#返回值: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.cancelAnimationFrame: 小程序/开发/API/画布/Canvas/Canvas.cancelAnimationFrame
你好，问题未复现。请提供一下出现问题的机型和微信版本，以及能复现问题的简单代码示例。
已添加
iphone 6sp /7s 微信6.6.1，这个问题还没有解决
<view class="qrcode-modal flex-center" hidden="{{hideModal}}">
<view class="qrcode-main-true" catchtap="hideModal"></view>
<view class="qrcode-modal-bg">
<view class="page">
<view class="panel">
<view class="barcode" catchtap="showBarcodeModal">
<view class="barnum">1223312</view>
<canvas canvas-id="barcode" />
</view>
<view class="qrcode" catchtap="showQrcodeModal">
<canvas canvas-id="qrcode" />
</view>
</view>
</view>
</view>
</view>
<view class="barcode-modal flex-center" hidden="{{barcodeModal}}" catchtap="hideBarcodeModal">
<view class="barnum">12312312321</view>
<view class="barcode-box">
<canvas canvas-id="barcode-canvas" />
</view>
</view>
<view class="qrcode-modal-canvas flex-center" hidden="{{qrcodeModal}}" catchtap="hideQrcodeModal">
<canvas canvas-id="qrcode-canvas" />
</view>
/* 卡弹窗 */
.qrcode-modal, .qrcode-main-true, .barcode-modal, .qrcode-modal-canvas {
left: 0;
top: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
}
.qrcode-modal {
z-index: 99;
}
.barcode-modal, .qrcode-modal-canvas {
background-color: #fff;
z-index: 120;
}
.barcode-modal {
flex-direction: column;
justify-content: center;
}
.qrcode-modal-bg {
background-color: #fff;
width: 680rpx;
box-sizing: border-box;
/* padding: 20rpx 30rpx; */
padding: 0 10rpx;
margin: 0 auto;
height: 750rpx;
overflow-y: hidden;
border-radius: 16rpx;
z-index: 100;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
padding-bottom: 10rpx;
}
.panel {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
box-sizing: border-box;
width: 100%;
border-radius: 10rpx;
background-color: #fff;
}
.barcode {
display: flex;
height: 320rpx;
flex-direction: column;
justify-content: center;
align-items: center;
}
.barnum {
width: 100%;
height: 100rpx;
line-height: 100rpx;
font-size: 38rpx;
font-weight: bold;
text-align: center;
letter-spacing: 10rpx;
white-space: nowrap;
}
.barcode > canvas {
width: 660rpx;
height: 200rpx;
}
.qrcode {
height: 420rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.qrcode > canvas {
width: 420rpx;
height: 420rpx;
}
.barcode-modal canvas {
height: 300rpx;
width: 750rpx;
}
.barcode-modal .barcode-box {
height: 300rpx;
width: 690rpx;
}
.barcode-modal>.barnum {
transform: scale(2);
}
.qrcode-modal-canvas>canvas {
width: 100%;
height: 750rpx;
}