小程序canvas绘图完整篇

这是我第二次画海报，完成后决定把整个流程写下来，供大家一起学习，不对的地方也请大家热心指教~
1.先给海报在页面上规定好宽高

       <!-- 画布大小按需定制  -->
<canvas canvas-id="springCanvas" style="width:328px;height:582px"></canvas>   

canvas-id一定要写，这就是海报要绘制的地方
如果不想看到绘制过程或效果，可以将canvas隐藏起来，我是这么写的

       <!-- 画布大小按需定制  -->
<view style='width:0px;height:0px;overflow:hidden;'>
    <canvas canvas-id="springCanvas" style="width:328px;height:582px"></canvas>   
</view> 

（如果有更好的方法，欢迎大家一起来讨论）
调试的时候我没有隐藏，因为可以直观的看到效果图进行修改完善
2.点击“保存海报”时触发canvas事件

<!--wxml文件-->
<div @tap="savePoster">保存海报</div>
<!--js文件-->
/*        
* 保存海报
*/
savePoster() {            
   var that = this;        
   this.drawCanvas();//调用绘制函数
   wx.showLoading({
   title: '努力生成中...'
   });
}
/**
* 绘制图片和文本
* 
*/
drawCanvas(){
   var that = this;
    //得到背景图片
    let promise1 = new Promise(function(resolve,reject){
          wx.getImageInfo({
          src:'图片地址',
          success:function(res){
               resolve(res);
          },
          fail:function(res){
                reject(res);
           }
           })
     })
     let promise2 = new Promise(function(resolve,reject){
          wx.getImageInfo({
               src:'图片地址',
                    success:function(res){
                        resolve(res);
                    },
                    fail:function(res){
                        reject(res);
                    }
                })
       })
       //成功得到图片信息后，开始绘图
      Promise.all([promise1, promise2])                        
            .then(res=>{
                wx.downloadFile({    //网络图片需要先下载到本地
                    url:'图片地址',
                    success(res) {
                        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                        if (res.statusCode === 200) {
                            const ctx = wx.createCanvasContext('springCanvas')
                            ctx.drawImage(res.tempFilePath, 0, 0, 328, 582);
                            ctx.draw()
                            wx.downloadFile({    //下载第二张网络图片
                                url:'图片地址',
                                success(res){
                                    if (res.statusCode === 200) {
                                        ctx.drawImage(res.tempFilePath,11,44,305,25)
                                        ctx.draw(true)
                                        //开始绘制文字
                                        ctx.setTextAlign('center')  //居中
                                        ctx.setFontSize(16)   //字号
                                        ctx.setFillStyle('rgba(141,23,0,1)')  //字体颜色
                                        ctx.fillText(that.renderData.orgName, 165, 61)
                                        ctx.draw(true)  //设为true时，不会擦除之前绘制的内容
                                        ctx.setFillStyle('white')
                                        ctx.fillRect(220, 480, 80, 80) //绘制白色矩形 
                                        ctx.draw(true,setTimeout(function(){
                                            wx.canvasToTempFilePath({
                                            x:0,
                                            y:0,
                                            width:328,
                                            height:582,
                                            destWidth: 328,
                                            destHeight: 582,
                                            canvasId:'springCanvas',
                                            success:function(res){
                                                console.log('res.tempFilePath'+res.tempFilePath);            
                                                that.preurl=res.tempFilePath,  //该路径为生成海报图片的临时路径         
                                                wx.hideLoading()
                                                that.saveToAlbum()  //保存到相册
                                            },
                                            fail:function(res){
                                                console.log(res)
                                            }
                                            })
                                            },2000))
                                        }
                                    }
                                })
                             }
                        }
                    })    
            }).catch(function(error) {
                    console.log(error)
                })

        },
        /**
        * 保存到相册
        */
        saveToAlbum: function() {
            var that = this
            // 生产环境时 记得这里要加入获取相册授权的代码
            // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
            wx.getSetting({
                success(res) {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success() {
                        // 用户已经同意小程序相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问
                        that.startSaveImage()
                        }
                    })
                } else {
                    that.startSaveImage()
                }
                }
            })
        },

        startSaveImage() {
            let that = this
            wx.saveImageToPhotosAlbum({
                filePath: that.preurl,
                success(res) {
                }
            })

        },

OK，到这里，海报已绘制完成并下载到相册（包括网络图片的下载和绘制，文字的绘制，矩形的绘制）。
下一篇将会写关于绘制海报时文字换行问题，请大家多多关注~