微信小程序canvas如何使用

本篇内容介绍了“微信小程序canvas如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

canvas简单理解成一张可以自定义大小(有上限)的画布，在画布上可以写字，画图形，放置图片。一般可以用来动态生成截图，方便用户保存和转发。

page.wxml

页面canvas被隐藏了

<!--画出试卷内容，通过css（position:fixed; left:100%;）隐藏canvas--><!--A4是2480*3508象素 210*297毫米--><canvas   wx:if="{{page==4}}"   type="2d"   id="canvas"   style="width:750rpx; height:1050rpx; position:fixed; left:100%;"></canvas>

page.js

通过 onCanvas 事件开始绘制画布内容

每绘制完成一页，通过 wx.canvasToTempFilePath 保存图片到本地

全部绘制完成，通过 wx.previewImage 进行图片预览

  // 初始化canvas   onCanvas: function (e) {    // 绘制完成直接显示     if(this.data.drawFinish) {      this.previewPapers()      return     }     wx.showLoading({      title: '试卷转图片中',     })    const query = wx.createSelectorQuery()     query.select('#canvas')       .fields({ node: true, size: true })       .exec((res) => {        const canvas = res[0].node        const ctx = canvas.getContext('2d')        const dpr = wx.getSystemInfoSync().pixelRatio         canvas.width = res[0].width * dpr         canvas.height = res[0].height * dpr        console.log('canvas.width, canvas.height', canvas.width, canvas.height)         ctx.scale(dpr, dpr)        // 绘制记忆卷         this.drawMemoryPaperImage(canvas, ctx)       })   },  // 绘制记忆卷   drawMemoryPaperImage(canvas, ctx) {    // 获取记忆卷数据     let memoryList = this.data.memoryList    // 绘制一页记忆卷(绘制第一页)     let oneMemoryPaper = memoryList[0]    let currentIndex = 0 // 0-表示绘制保存第一页数据     let totalPages = memoryList.length    this.drawOneMemoryPaperImage(canvas, ctx, oneMemoryPaper, currentIndex, totalPages)   },  // 绘制一页记忆卷   drawOneMemoryPaperImage(canvas, ctx, oneMemoryPaper, currentIndex, totalPages) {    let maxWidth = 750         let pg = oneMemoryPaper    // 绘制前清空canvas     ctx.clearRect(0, 0, canvas.width, canvas.height)    // 绘制标题     ctx.font = '18px sans-serif'     ctx.textAlign = 'center';     ctx.fillText('快速数字记忆卷', 375, 70, maxWidth )    for(let j=0; j<pg.length; j++) {      let row = pg[j]      for(let k=0; k<row.length; k++) {        let text = pg[j][k]        let x = k * 17 + 40         let y = j * 35 + 150         // 绘制数字         ctx.font = '14px sans-serif'         ctx.textAlign = 'left';         ctx.fillText(text, x, y, maxWidth )        // 绘制行号         if(k==39) {          let rowNo = 'Row ' + (j<9?'0'+(j+1):(j+1))                      ctx.fillText(rowNo, x+25, y, maxWidth )         }       }     }    // 绘制页码     ctx.font = '18px sans-serif'     ctx.textAlign = 'center';     ctx.fillText('第 '+(currentIndex+1)+' 页', 375, 1050, maxWidth )    // 保存试卷到小程序临时目录     let paper = 'paper.memoryPaper['+currentIndex+']'     this.saveToTempFilePath(canvas, ctx, paper, currentIndex, totalPages)   },     // 保存绘制的试卷到小程序临时目录   saveToTempFilePath(canvas, ctx, paper, currentIndex, totalPages) {    var that = this     wx.canvasToTempFilePath({      canvas: canvas,       success(res) {         that.setData({            [paper]: res.tempFilePath,         })        // 绘制下一页数据         let nextIndex = currentIndex + 1         if(nextIndex < totalPages) {           that.drawNextOneMemoryPaperImage(canvas, ctx, nextIndex, totalPages)         }else {          // 记忆卷全部绘制完成           that.setData({ drawFinish:true })           wx.hideLoading({            success: (res) => {              console.log('记忆卷全部绘制完成')             },           })           that.previewPapers()         }       },       fail(err) {        console.log(err)       }     })   },  // 绘制下一页数据   drawNextOneMemoryPaperImage(canvas, ctx, nextIndex, totalPages) {    // 获取记忆卷数据     let memoryList = this.data.memoryList    let currentIndex = nextIndex    let oneMemoryPaper = memoryList[nextIndex]    this.drawOneMemoryPaperImage(canvas, ctx, oneMemoryPaper, currentIndex, totalPages)       },  // 预览试卷   previewPapers() {    let paper = this.data.paper     wx.previewImage({      current: paper.memoryPaper[0],      urls: paper.memoryPaper     })   },

“微信小程序canvas如何使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！