- 当前 Bug 的表现（可附上截图）

此机型为OPPOR7

- 预期表现

    开发工具中和其他机型：

- 复现路径

- 提供一个最简复现 Demo

js:

// pages/supervise/superviseAgreement/superviseAgreement.js

let ctx = null;

let isButtonDown = false;

const arrx = [];

const arry = [];

const arrz = [];

let canvasw = 0;

let canvash = 0;

Page({

/**

  * 页面的初始数据

  */

data: {

src: '',

},

/**

  * 生命周期函数--监听页面加载

  */

onLoad: function (options) {

// 使用wx.createContext获取绘图上下文context

ctx = wx.createCanvasContext('canvas');

ctx.beginPath();

ctx.setStrokeStyle('#000000');

ctx.setLineWidth(4);

ctx.setLineCap('round');

ctx.setLineJoin('round');

ctx.draw();

},

canvasStart(e){

console.log(e)

isButtonDown = true;

arrz.push(0);

arrx.push(e.changedTouches[0].clientX - e.currentTarget.offsetLeft);

arry.push(e.changedTouches[0].clientY - e.currentTarget.offsetTop);

},

canvasMove(e){

console.log(e)

if(isButtonDown){

arrz.push(1);

arrx.push(e.changedTouches[0].clientX - e.currentTarget.offsetLeft);

arry.push(e.changedTouches[0].clientY - e.currentTarget.offsetTop);

}

for(let i = 0; i < arrx.length; i++){

if(arrz[i] === 0){

ctx.moveTo(arrx[i], arry[i])

}else{

ctx.lineTo(arrx[i],arry[i]);

}

}

// ctx.clearRect(0, 0, canvasw, canvash);

ctx.setStrokeStyle('#000000');

ctx.setLineWidth(4);

ctx.setLineCap('round');

ctx.setLineJoin('round');

ctx.stroke();

ctx.draw(false);

},

canvasEnd(e){

console.log(e)

isButtonDown = false;

},

canvasError(e){

console.log(e.detail.errMsg);

},

canvasSave(){

wx.canvasToTempFilePath({

canvasId: 'canvas',

fileType: 'jpg',

quality: 1,

x: 0,

y: 0,

width: 300,

height: 200,

destWidth: 300,

destHeight: 200,

success: res => {

console.log(res);

this.setData({

src: res.tempFilePath

});

}

});

},

canvasClear(){

arrx.length = 0;

arry.length = 0;

arrz.length = 0;

ctx.draw(false);

},

/**

  * 生命周期函数--监听页面初次渲染完成

  */

onReady: function () {

},

/**

  * 生命周期函数--监听页面显示

  */

onShow: function () {

},

/**

  * 生命周期函数--监听页面隐藏

  */

onHide: function () {

},

/**

  * 生命周期函数--监听页面卸载

  */

onUnload: function () {

},

/**

  * 页面相关事件处理函数--监听用户下拉动作

  */

onPullDownRefresh: function () {

},

/**

  * 页面上拉触底事件的处理函数

  */

onReachBottom: function () {

},

/**

  * 用户点击右上角分享

  */

onShareAppMessage: function () {

}

})

wxml:

<view class='superviseAgreementContainer'>

<view class='header'>

<canvas

disable-scroll

canvas-id='canvas'

class='canvas'

bind:touchstart='canvasStart'

bind:touchmove='canvasMove'

bind:touchend='canvasEnd'

bind:touchcancel='canvasEnd'

bind:error='canvasError'

>

</canvas>

</view>

<view class='body'>

<button bind:tap='canvasSave'>生成图片显示</button>

<button bind:tap='canvasClear'>清除</button>

</view>

<view class='footer'>

<image src='{{src}}'></image>

</view>

</view>

wxss:

.superviseAgreementContainer{

height: 100%;

background-color: #ffffff;

display: flex;

flex-direction: column;

align-items: center;

}

.canvas {

width: 100%;

height: 100%;

background-color: #ddd;

margin: 0 auto;

}

.header{

width: 600rpx;

height: 400rpx;

}

.body{

display: flex;

justify-content: start;

}

.footer image{

border: 1rpx dashed #ddd;

width: 600rpx;

height: 400rpx;

}