基本信息
源码名称：小程序canvas画图
源码大小：4.62KB
文件格式：.zip
开发语言：js
更新时间：2019-09-26
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559
本次赞助数额为： 2 元×
微信扫码支付：2 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
const app = getApp()
/**主要函数介绍：
* 1. getEleWidth()：获取屏幕自适应宽度，自适应手机屏幕分辨率大小
* 2. drawYScale()：划分Y轴，设定Y轴的起点(Y轴坐标原点是图层最上面)，Y轴总高度，然后划分Y轴坐标，坐标分为大刻度坐标和小刻度坐标，设定大刻度坐标长度和小刻度坐标长度，画好Y轴坐标之后，再画刻度横线
* 3. drawXScale()：划分X轴，同Y轴一样，设定X轴坐标原点和长度，划分刻度值
* 4. drawDashLine() ：画虚线，X轴和Y轴的虚线，这个其实很简单，确定虚线的起始坐标和终点坐标，画直线就行了，主要是找到坐标
* 5. drawCharts()：画折线，一个一个点连接，就成了一条折线图
* ctx.setStrokeStyle('red')
ctx.strokeRect(10, 10, 150, 75)
*/
Page({
data: {
x: 0,
y: 0,
hidden: true,
styleBorderWidth:1,//曲线宽度
styleBorderColor: ["#38902E","#519090"],//曲线颜色
list: [[45,40,35,30,25,20,15,10,5,0], [65,62.5,60,57.5,55,52.5,50,47.5,45,42.5,40]],
//偏移
h32: 32,//y轴
h64: 64,//x轴
h360: 360,//高
h420: 420,// 宽
s28: 20,//标题字体大小
s18: 18,//x，y轴字体大小
heightLineNum: 15,//Y轴分成的大分段
widthLineNum: 10,//X轴分成的大分段
yOneDuan: 5//Y轴一个分段的值
},
onLoad: function (options) {
//折线图
this.initChart()
},
// 初始化折线图
initChart: function () {
const ctx = wx.createCanvasContext('canvasId')
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, this.data.h420, this.data.h360)
ctx.beginPath()
ctx.setStrokeStyle('#999999')
ctx.setFillStyle('#AAAAAA')
ctx.setLineWidth(1)
//坐标原点，Y轴坐标值从上往下是增加
const leftBottomX = this.getEleWidth(this.data.h64)
const leftBottomY = this.getEleWidth(this.data.h360)
//Y坐标
const leftTopX = this.getEleWidth(this.data.h64)
const leftTopY = this.getEleWidth(this.data.h32)
//X坐标
const rightBottomX = this.getEleWidth(this.data.h420)
const rightBottomY = this.getEleWidth(this.data.h360)
const yHeight = this.getEleWidth(this.data.h360 - this.data.h32)
const xWidth = this.getEleWidth(this.data.h420 - this.data.h64)
//从Y轴坐标开始画坐标系
//Y轴坐标到原点坐标画出Y轴线
//画完Y轴线，再从原点坐标到X轴坐标画出X轴线
ctx.moveTo(leftTopX, leftTopY)
ctx.lineTo(leftBottomX, leftBottomY)
ctx.lineTo(rightBottomX, rightBottomY)
//设置字体大小
ctx.setFontSize(this.getEleWidth(this.data.s28))
//设置字的位置
ctx.fillText("曲线图", this.getEleWidth(340), this.getEleWidth(32))
//划分Y轴
this.drawYScale(ctx);
//划分X轴
this.drawXScale(ctx);
//画折线
this.drawCharts(ctx);
ctx.stroke()
ctx.draw(true)
},
//划分Y轴
drawYScale: function (ctx) {
var that = this;
//Y轴坐标刻度横坐标起点
var scaleStartX = this.getEleWidth(this.data.h64)
//长的刻度
var scaleEndX = this.getEleWidth(this.data.h64 18)
//短的刻度
var littleScaleEndX = this.getEleWidth(this.data.h64 9)
//Y轴刻度总高度
const yHeight = this.getEleWidth(this.data.h360)
//一个大分段的长度，一共分为6段
var oneScaleX = yHeight / this.data.heightLineNum
//大分段数字字体大小
ctx.setFontSize(this.getEleWidth(this.data.s18))
//大分段数字位置横坐标
var textX = this.getEleWidth(this.data.h64 - 42)
/**大分段，长刻度：50-300*/
for (var i = 1; i < this.data.heightLineNum; i ) {
var scaleEndY = yHeight - oneScaleX * i
//画长刻度线条
ctx.moveTo(scaleStartX, scaleEndY)
ctx.lineTo(scaleEndX, scaleEndY)
ctx.fillText(this.data.yOneDuan * i, textX, scaleEndY this.getEleWidth(10))
var littleScaleStartY = yHeight - oneScaleX * (i - 1)
//小分段，短刻度
for (var j = 1; j < 5; j ) {
var littleScaleEndY = littleScaleStartY - (oneScaleX / 5) * j
//画短刻度线条
ctx.moveTo(scaleStartX, littleScaleEndY)
ctx.lineTo(littleScaleEndX, littleScaleEndY)
ctx.stroke();
}
};
/***/
//虚线总长度
const rightBottomX = this.getEleWidth(this.data.h420)
const space = this.getEleWidth(10)
for(var hy=0;hy<that.data.heightLineNum;hy ){
//高和低虚线Y轴坐标
const hys = yHeight - oneScaleX * hy;
//限制虚线
that.drawDashLine(ctx, scaleStartX, hys, rightBottomX, hys, space);
};
// const hy1 = yHeight - oneScaleX * 1;
// const lowlimitLineY = yHeight - oneScaleX * 2;
// const middlelimitLineY = yHeight - oneScaleX * 4;
// const highlimitLineY = yHeight - oneScaleX * 6;
// const highlimitLineY8 = yHeight - oneScaleX * 8;
// //虚线总长度
// const rightBottomX = this.getEleWidth(this.data.h420)
// const space = this.getEleWidth(10)
// //限制虚线
// that.drawDashLine(ctx, scaleStartX, lowlimitLineY, rightBottomX, lowlimitLineY, space);
// that.drawDashLine(ctx, scaleStartX, middlelimitLineY, rightBottomX, middlelimitLineY, space);
// that.drawDashLine(ctx, scaleStartX, highlimitLineY, rightBottomX, highlimitLineY, space);
// that.drawDashLine(ctx, scaleStartX, highlimitLineY8, rightBottomX, highlimitLineY8, space);
},
//划分X轴
drawXScale: function (ctx) {
var that = this;
//虚线总高度
var scaleStartY = this.getEleWidth(that.data.h360)
//虚线顶点Y轴高度
var scaleEndY = this.getEleWidth(that.data.h32)
//X轴总长度=X轴横坐标-向右偏移长度
const xWidth = this.getEleWidth(that.data.h420 - that.data.h64)
//X轴起始点
const xMaginLeft = this.getEleWidth(that.data.h64)
//一个分段的宽度
const oneScaleX = xWidth / (that.data.widthLineNum 1)
const space = this.getEleWidth(10)
for (var i = 0; i < that.data.widthLineNum 1; i ) {
var toEndX = xMaginLeft oneScaleX * i;
if (i > 0) {
that.drawDashLine(ctx, toEndX, scaleStartY, toEndX, scaleEndY, space);
}
ctx.fillText(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.3)//opaction值
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()
var that = this;
// lineJoin---'bevel'、'round'、'miter' 线条的结束交点样式
ctx.setLineWidth(that.data.styleBorderWidth);//曲线宽度
const yHeight = this.getEleWidth(that.data.h360)
const xWidth = this.getEleWidth(that.data.h420 - this.data.h64)
//X坐标，一个空格的值
const oneScaleX = xWidth / (that.data.widthLineNum 1)
//Y坐标，一个空格的值
var oneScaleY = yHeight / this.data.heightLineNum;
for (var z = 0; z < that.data.list.length;z ){
ctx.setStrokeStyle(that.data.styleBorderColor[z])//曲线颜色
var list = that.data.list[z];
console.log();
for (var i = 0; i < list.length; i ) {
var height = list[i];
//计算X坐标
var x = oneScaleX * (i 1) this.getEleWidth(that.data.h64);
//计算Y坐标
var y = yHeight - oneScaleY / this.data.yOneDuan * height
if (i == 0) {
ctx.moveTo(x, y)
} else {
ctx.lineTo(x, y)
}
}
ctx.stroke()
ctx.draw(true)
};
// ctx.setStrokeStyle("#DEE00C")
// var list = that.data.list[0];
// console.log(list);
// console.log(that.data.list.length);
// const yHeight = this.getEleWidth(that.data.h360)
// const xWidth = this.getEleWidth(that.data.h420 - this.data.h64)
// //X坐标，一个空格的值
// const oneScaleX = xWidth / (that.data.widthLineNum 1)
// //Y坐标，一个空格的值
// var oneScaleY = yHeight / this.data.heightLineNum;
// for (var i = 0; i < list.length; i ) {
// var height = list[i];
// //计算X坐标
// var x = oneScaleX * (i 1) this.getEleWidth(that.data.h64);
// //计算Y坐标
// var y = yHeight - oneScaleY / this.data.yOneDuan * height
// if (i == 0) {
// ctx.moveTo(x, y)
// } else {
// ctx.lineTo(x, y)
// }
// }
// ctx.stroke()
// ctx.draw(true)
},
//获取屏幕自适应宽度
getEleWidth: function (w) {
var real = 0;
try {
var res = wx.getSystemInfoSync().windowWidth;
//以宽度480px设计做宽度的自适应
var scale = (480 / 2) / (w / 2);
real = Math.floor(res / scale);
return real;
} catch (e) {
return false;
}
},
start: function (e) {//开始坐标系
this.setData({
hidden: false,
x: e.touches[0].x,
y: e.touches[0].y
})
},
move: function (e) {//移动坐标系
this.setData({
x: e.touches[0].x,
y: e.touches[0].y
})
},
end: function (e) {//结束
this.setData({
hidden: true
})
},
btnImg:function(){
wx.canvasToTempFilePath({
destWidth: 500,
destHeight: 500,
canvasId: 'canvasId',
success: function (res) {
console.log(res.tempFilePath)
var url = res.tempFilePath;
console.log(url);
wx.downloadFile({
url: url, //下载资源的地址网络
success: function (res) {
//console.log(res)
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.playVoice({
filePath: res.tempFilePath
})
}
// 保存图片到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success:
function (data) {
//console.log(data);
wx.showModal({
title: '下载成功',
content: '图片以保存至您的手机',
})
},
})
}
})
}
})
}
})