js代码：

// pages/test/test.js

Page({

/**

  * 页面的初始数据

  */

data: {

item:[222,11,11,23,111,111,333],

week: [‘一’, ‘二’, ‘三’, ‘四’, ‘五’, ‘六’, ‘七’],

},

/**

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

  */

onLoad: function (options) {

this.initChart()

this.canvas()

},

canvas: function () {

var that = this

console.log(“jinlaile”)

wx.canvasToTempFilePath({

canvasId: ‘firstCanvas’,

success: function (res) {

console.log(“chulaile”)

console.log(res.tempFilePath)

},

fail(res) {

console.log(res)

}

})

},

/**

  *   折线图

  */

initChart: function () {

const ctx = wx.createCanvasContext(‘firstCanvas’)

ctx.beginPath()

ctx.setStrokeStyle(’#999999’)

ctx.setFillStyle(’#ffffff’)

ctx.setLineWidth(1)

const leftTopX = this.getEleWidth(60)

const leftTopY = this.getEleWidth(10)//左上点

const leftBottomX = this.getEleWidth(60)

const leftBottomY = this.getEleWidth(200)//原点

const rightBottomX = this.getEleWidth(360 + 10)

const rightBottomY = this.getEleWidth(200)//右下点

const yHeight = this.getEleWidth(444)

const xWidth = this.getEleWidth(588)

ctx.moveTo(leftTopX, leftTopY)

//y轴

ctx.lineTo(leftBottomX, leftBottomY)

//x轴

ctx.lineTo(rightBottomX, rightBottomY)

ctx.setFontSize(this.getEleWidth(30))

ctx.stroke()

this.drawYScale(ctx);

this.drawXScale(ctx);

//画折线

this.drawCharts(ctx);

ctx.stroke()

ctx.draw(true)

},

drawYScale: function (ctx) {

var that = this;

var lists = that.data.item

var scaleStartX = this.getEleWidth(60)     //竖向刻度线的起始点

var scaleEndX = this.getEleWidth(60 + 15)

var littleScaleEndX = this.getEleWidth(60 + 7)  //竖向刻度线末端y坐标

const scaleStartY = this.getEleWidth(200)  //刻度线底部起始位置y坐标

const yHeight = this.getEleWidth(190)   //y轴高度

var oneScaleX = yHeight / 5      //计算每个大段刻度线相隔多远

ctx.setFontSize(this.getEleWidth(15))

var textX = this.getEleWidth(55)

var max1 = lists[0];

for (var j1 = 0; j1 < 7; j1++) {

if (parseInt(lists[j1]) > parseInt(max1)) {

max1 = lists[j1];

}

}

var t1 = 0;

while ((max1 / 10) > 1) {

max1 = (max1 / 10).toFixed(0);

t1++;

}

var big1 = Math.pow(10, t1) * (parseInt(max1) + 1)

for (var i = 1; i < 6; i++) {

var scaleEndY = scaleStartY - oneScaleX * i

ctx.moveTo(scaleStartX, scaleEndY)

ctx.lineTo(scaleEndX, scaleEndY)

var littleScaleStartY = scaleStartY - (yHeight / 5) * (i - 1)

ctx.setTextAlign(‘right’)

ctx.fillText(big1 / 5 * i, textX, scaleEndY + this.getEleWidth(10))

ctx.stroke();

}

},

drawXScale: function (ctx) {

var that = this;

var week = that.data.week;

var scaleStartY = this.getEleWidth(200) //竖向虚线开始Y

var scaleEndY = this.getEleWidth(10)    //竖向虚线结束Y

const xWidth = this.getEleWidth(310)      //横坐标最大宽度      

const xMaginLeft = this.getEleWidth(60)    //原点横坐标

const oneScaleX = xWidth / 6          //每个横坐标间距

const space = this.getEleWidth(10)

for (var i = 1; i < 7; i++) {

var toEndX = xMaginLeft + oneScaleX * i;

that.drawDashLine(ctx, toEndX, scaleStartY, toEndX, scaleEndY, space)

}

for (var i = 0; i < 7; i++) {

var toEndX = xMaginLeft + oneScaleX * i;

ctx.fillText(week[i], toEndX - this.getEleWidth(5), scaleStartY + this.getEleWidth(30))

}

},

//画虚线

drawDashLine: function (ctx, x1, y1, x2, y2, dashLength) {  //传context对象，始点x和y坐标，终点x和y坐标，虚线长度

ctx.beginPath()

ctx.setLineWidth(0.5)

var dashLen = dashLength === undefined ? 3 : dashLength,

xpos = x2 - x1, //得到横向的宽度;

ypos = y2 - y1, //得到纵向的高度;

numDashes = Math.floor(Math.sqrt(xpos * xpos + ypos * ypos) / dashLen);

//利用正切获取斜边的长度除以虚线长度，得到要分为多少段;

for (var i = 0; i < numDashes; i++) {

if (i % 2 === 0) {

ctx.moveTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);

//有了横向宽度和多少段，得出每一段是多长，起点 + 每段长度 * i = 要绘制的起点；

} else {

ctx.lineTo(x1 + (xpos / numDashes) * i, y1 + (ypos / numDashes) * i);

}

}

ctx.stroke();

},

drawCharts: function (ctx) {

//   画折线

ctx.beginPath()

ctx.setStrokeStyle(’#09D4F5’)

ctx.setLineWidth(2)

var that = this;

var list = that.data.item

const leftTopX = this.getEleWidth(60)

const leftBottomY = this.getEleWidth(200)

const yHeight = this.getEleWidth(190)

const xWidth = this.getEleWidth(310)

var ma = list[0];

for (var m = 0; m <= 6; m++) {

if (parseInt(list[m]) > ma) {

ma = list[m]

}

}

var t = 0;

while ((ma / 10) > 1) {

ma = (ma / 10).toFixed(0);

t++;

}

var big = Math.pow(10, t) * (parseInt(ma) + 1)

console.log(“big=” + big)

for (var i = 0; i < list.length; i++) {

var height = list[i];

var x = leftTopX + (xWidth / (list.length - 1)) * i

var y = leftBottomY - (height / big) * yHeight

if (i == 0) {

ctx.moveTo(x, y)

} else {

ctx.lineTo(x, y)

}

}

ctx.stroke()

//画点

for (var i = 0; i < list.length; i++) {

var height = list[i];

var x = leftTopX + (xWidth / (list.length - 1)) * i

var y = leftBottomY - (height / big) * yHeight

if (i == 0) {

ctx.setFillStyle(‘red’)

ctx.beginPath();

ctx.arc(x, y, 2, 0, 2 * Math.PI * 2);

} else {

ctx.setFillStyle(‘red’)

ctx.beginPath();

ctx.arc(x, y, 2, 0, 2 * Math.PI * 2);

}

ctx.fill();

}

//画阴影

for (var i = 1; i < 7; i++) {

var height = list[i];

var height1 = list[i - 1];

var x = leftTopX + (xWidth / (list.length - 1)) * i

var y = leftBottomY - (height / big) * yHeight

var x1 = leftTopX + (xWidth / (list.length - 1)) * (i - 1)

var y1 = leftBottomY - (height1 / big) * yHeight   //上个点的y坐标

ctx.setFillStyle(‘rgba(39,60,125,0.5)’)

ctx.beginPath();

ctx.moveTo(x, leftBottomY)

ctx.lineTo(x, y)

ctx.lineTo(x1, y1)

ctx.lineTo(x1, leftBottomY)

ctx.fill();

}

ctx.draw(true)

}

,

//为了获取按钮的宽度

getEleWidth: function (w) {

var real = 0;

try {

var res = wx.getSystemInfoSync().windowWidth;

var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应

real = Math.floor(res / scale);

return real;

} catch (e) {

return false;

}

},

/**

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

  */

onReady: function () {

},

/**

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

  */

onShow: function () {

},

/**

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

  */

onHide: function () {

},

/**

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

  */

onUnload: function () {

},

/**

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

  */

onPullDownRefresh: function () {

},

/**

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

  */

onReachBottom: function () {

},

/**

  * 用户点击右上角分享

  */

onShareAppMessage: function () {

}

})

html代码：

<canvas canvas-id=“firstCanvas” ></canvas>

制成的效果图

想把这个折线图 转成图片 然后把路径传给  image 的src  但是打印不出路径