#微信小程序##canvas#

Question

微信小程序中每当用户新存入一条数据后我就在画布上绘出相关的记录。
但是canvas总是只能显示到height指定的位置，超出的部分不能显示。
有什么办法可以让canvas内部也可以滑动吗？
运行效果图：

Answer 1

方法1.将绘制出的canvas 保存为本地路径的一个img 路径.然后将图片放到 scroll-view 里面,进行滑动.亲测,滑动最流畅
html：

<scroll-view class="temp_day_box" scroll-x>
  <view class="canvas_height">
     <image class="canvas_img" src='{{canvasSaveimg}}'></image>
  </view>
</scroll-view>
<canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 

css：

.canvasHigh {
    width: 2250rpx;
    height: 270rpx;
    transform: translateX(-200%);
}
.canvas_img{
    width: 2250rpx;
    height: 270rpx;
}

这里的canvasHigh的css属性可以用很多其他的方式隐藏,但是这里注意的是一定不能用display:none;或者 标签里面加hidden,wx:if属性,这样保存下来的图片路径是不会显示出来的。

js：

//前面的写法这里就不再编写,可以查看相关文档和官方api
ctx.draw();
wx.canvasToTempFilePath({
    canvasId: 'canvasWeather',//canvasId和标签里面的id对应
    success: (res) => {
        var shareTempFilePath = res.tempFilePath;
        _this.setData({
            //将获取到的图片临时路径set到canvasSaveimg中
            canvasSaveimg:shareTempFilePath
        })
    }
}) 

方法2.在scroll-view标签中绑定一个滚动时触发的事件,这里就不需要保存为图片,但是动画效果有点小小的僵硬。

html：

<scroll-view class="temp_day_box" scroll-x bindscroll='scrollCanvas'> 
  <view class="canvas_height" style='transform: translateX(-{{canvasLen}}px);'>
    <canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 
  </view>
</scroll-view>

js：

scrollCanvas: function(e) {
    console.log(e);
    var canvasLen = e.detail.scrollLeft;
    this.setData({
        canvasLen: canvasLen
    })
}