小白快速入门canvas画海报

小编以微信小程序原生语言举例

wxml页面：

<canvas type="2d" id="myCanvas" style="width:375px;height:667px;"></canvas>

js页面：

import drawQrcode from '../../../utils/qrcode/weapp.qrcode.esm'

data: {
    // 海报路径
    tempFilePath: "",
  },


createCanvas() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        let dpr=1
        canvas.width = 375*dpr        //画布的宽度
        canvas.height = 667*dpr        //画布的高度
        const image = canvas.createImage()
        image.onload=()=>{
          //image是图片，0为x坐标，0为y坐标，375*dpr是宽度，667*dpr是高度根据自己的填写，这里的x,y坐标是海报的位置，建议就是0,0
          ctx.drawImage(image, 0, 0,375*dpr,667*dpr)   
           //字体大小和样式 
          ctx.font="20px SourceHanSansSC-Medium";
           //文本显示
          ctx.textAlign="center";
            //文本颜色
          ctx.fillStyle="#fff";
            //标题是文本内容，188*dpr是X坐标，205*dpr是Y坐标根据自己需求填写，这里的x，y坐标是在海报上的位置
          ctx.fillText("标题",188*dpr,205*dpr);
            //这个是在海报上画二维码，根据自己需求，要是需要记得导入qrcode文件，小编这里也有写过，小编运用的就是小编自己的qrcode文件，文件小编在canvas画二维码并生成图片（微信原生可用，其余的平台可以自行尝试）这篇文章的第一步有写，可直接复制哦
         drawQrcode({
            //canvas: canvas,
            ctx: ctx,
            width:219,
            height:219,
            padding:30,
            x:80,
            y:296,
            text: this.data.ewm_image,
          })

          // 生成图片
          wx.canvasToTempFilePath({
            canvasId: 'myCanvas', 
            canvas:canvas,
            width: 375,
            height: 667,
            // 同比例放大，决定了保存图片的清晰程度
            destWidth: 375*2.5,
            destHeight: 667*2.5,
            // 图片质量
            quality: 1,
            success:(res) => {
              this.setData({
                tempFilePath: res.tempFilePath       
              })
            }
            fail(err){
              console.log("err",err)
            }
          })  
        }

         image.src="../../images/bg.png"        //背景图，根据自己需求
       })  
}

注：虽然在代码里面有写，但是小编还是得再提示一次，代码中的drawQrcode是海报中画二维码的，这里小编运用的就是小编自己的qrcode文件，文件小编在canvas画二维码并生成图片（微信原生可用，其余的平台可以自行尝试）这篇文章的第一步有写，可直接复制哦，从以下链接进入即可，也可查看小编的文章找寻哦

https://mp.csdn.net/mp_blog/creation/editor/139687083https://mp.csdn.net/mp_blog/creation/editor/139687083