小程序canvas画图

【实例截图】

【核心代码】

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: '图片以保存至您的手机',
                  })
                },
            })
          }
        })

      }
    })
  }
 
})