如上图，这是在一个自定义组件内的canvas左图是它的位置，但是实际绘制图片以后却在右边，而且好像又是另外一个canvas,如下图
绘图代码如下，都是从原点开始，
// 绘制白色背景
console.info(‘分享参数’, data);
that.context.setFillStyle(’#000000’);
that.context.fillRect(0, 0, data.width , data.height);
// 绘制封面图
that.context.drawImage(data.cover_img, 0, 0,data.width, 200);
that.context.draw();
wx.hideLoading()
求解？？？？
//.wxml
<view class=“share-modal {{shareModal?‘fade-in’:fade-out}}” catchtap=“closeHandle”>
<view class=“share-head” hidden="{{!showCanvas}}" catchtap=“onTap” style=“opacity:{{draw_status?1:0}}”>
<view class=“share-title”>
<text>分享到朋友圈</text>
</view>
<view class=“share-canvas”>
<canvas canvas-id=“myCanvas” id=“friend”></canvas>
</view>
<view class=“shre-tips”>
<text>图片已经保存到相册，快去微信朋友圈分享吧～</text>
</view>
<view class=“share-title share-ok” catchtap=“closeHandle”>
<text>马上去朋友圈</text>
</view>
</view>
<view class=“share-sheet {{showSheet?‘up’:‘down’}}” catchtap=“onTap”>
<view class=“share-img”>
<button open-type=“share”>
<view class=“share-icon”>
<image src="…/…/assets/img/weixin.png"></image>
</view>
<view class=“icon-title”>好友</view>
</button>
<button catchtap=“shareHandle”>
<view class=“share-icon”>
<image src="…/…/assets/img/pengyouquan.png"></image>
</view>
<view class=“icon-title”>朋友圈</view>
</button>
</view>
<view class=“cancel-btn” catchtap=“closeHandle” hover-class=“navigator-hover”>
取消
</view>
</view>
</view>
<slot></slot>
//.scss(使用了scss,编译后为wxss)
$share-modal-animation-time: .3s !default;
.share-modal {
width: 100vw;
height: 0px;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0);
z-index: 9999;
.share-sheet {
position: fixed;
bottom: -139px;
width: 100vw;
border-top: 1px solid #828282;
background: #fff;
.share-img {
display: flex;
flex-direction: row;
justify-content: flex-start;
button {
padding-bottom: 8px;
padding-top: 8px;
padding-right: 0px;
padding-left: 0px;
margin-left: 16px;
margin-right: 0px;
background: transparent;
.icon-title {
color: #cccccc;
font-size: 12px;
line-height: 25px;
}
.share-icon,
image {
width: 34px;
height: 34px;
}
.share-icon {
padding: 8px 8px 0px;
}
&:after,
&:before {
border: 0px;
}
}
}
.cancel-btn {
border-top: 5px solid #cccccc;
line-height: 50px;
height: 50px;
color: #000;
text-align: center;
}
}
.share-head {
position: fixed;
top: 20px;
width: 80vw;
left: 10vw;
border-radius: 5px;
background: #fff;
.share-title{
height: 40px;
color:#000;
line-height: 40px;
}
.share-canvas {
margin: 0px auto;
border: 1px solid #ccc;
width: 75vw;
height: 65vh;
canvas {
width: 75vw;
height: 65vh;
}
}
.shre-tips {
padding: 0px 2.5vw 10px;
line-height: 1.2em;
font-size: 0.9em;
text-align: left;
color: #666666
}
.share-ok {
border-top: 1px solid #cccccc;
height: 40px;
line-height: 40px;
color: #000;
}
}
}
.fade-in {
animation: fade-in $share-modal-animation-time forwards;
}
.fade-out {
animation: fade-out $share-modal-animation-time;
}
.down {
animation: fade-down $share-modal-animation-time forwards;
}
.up {
animation: fade-up $share-modal-animation-time forwards;
}
@keyframes fade-in {
0% {
height: 100vh;
background: rgba(0, 0, 0, 0);
}
to {
height: 100vh;
background: rgba(0, 0, 0, .5);
}
}
@keyframes fade-out {
from {
height: 100vh;
background: rgba(0, 0, 0, .5);
}
to {
height: 100vh;
background: rgba(0, 0, 0, 0);
}
}
@keyframes fade-up {
from {
transform: translateY(0px);
}
to {
transform: translateY(-139px);
}
}
@keyframes fade-down {
from {
transform: translateY(-139px);
}
to {
transform: translateY(0px);
}
}
强力驱动