求助管理员和大神：canvasToTempFilePath找不到canvasid
为什么不能用 详情看代码
8 回复
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 但是打印不出路径
微信开发者工具的打印结果
