简介：本文详细解析小程序Canvas组件在图片绘制与竖排文字渲染中的核心技巧，包含坐标计算、样式控制及性能优化策略，助力开发者实现复杂视觉效果。

一、Canvas在小程序中的基础作用与特性

小程序Canvas组件作为底层绘图API，提供了与HTML5 Canvas高度相似的接口，但针对移动端场景进行了性能优化。其核心特性包括：

双层渲染机制：小程序Canvas分为模板层与渲染层，开发者通过setData更新绘图指令，由微信客户端完成最终渲染。
异步绘制特性：所有绘图操作需在CanvasContext实例中执行，需通过draw()方法触发实际渲染，此过程为异步操作。
坐标系原点：默认以Canvas左上角为(0,0)点，X轴向右递增，Y轴向下递增，这与部分图形库的Y轴向上递增不同。

在图片与文字混合绘制的场景中，需特别注意：

图片加载为异步过程，必须监听@load事件获取图片尺寸后再进行绘制
文字测量需通过measureText()获取宽度，但竖排文字需自行实现坐标转换
频繁绘制会导致性能下降，建议使用离屏Canvas或分区域绘制

二、图片绘制的核心实现方法

1. 基础图片绘制流程

// 获取Canvas上下文
const ctx = wx.createCanvasContext('myCanvas')
// 创建Image对象
const img = wx.createImage()
img.src = 'https://example.com/image.jpg'
img.onload = () => {
  // 绘制图片（x,y为左上角坐标，w,h为宽高）
  ctx.drawImage(img, 50, 50, 200, 150)
  ctx.draw() // 触发渲染
}

关键参数说明：

drawImage()支持三种重载形式：
- drawImage(image, dx, dy)
- drawImage(image, dx, dy, dWidth, dHeight)
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)（裁剪绘制）

2. 图片处理进阶技巧

2.1 本地图片处理

wx.chooseImage({
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0]
    const img = wx.createImage()
    img.src = tempFilePath
    img.onload = () => {
      // 保持宽高比绘制
      const scale = Math.min(300/img.width, 200/img.height)
      ctx.drawImage(img, 50, 50, img.width*scale, img.height*scale)
      ctx.draw()
    }
  }
})

2.2 图片合成与遮罩

// 绘制背景
ctx.setFillStyle('#f0f0f0')
ctx.fillRect(0, 0, 400, 300)
// 绘制主图
ctx.drawImage(mainImg, 50, 50, 200, 200)
// 应用圆形遮罩
ctx.save()
ctx.beginPath()
ctx.arc(150, 150, 100, 0, Math.PI*2)
ctx.clip()
ctx.drawImage(overlayImg, 50, 50, 200, 200)
ctx.restore()

三、竖排文字的实现方案

1. 基础竖排实现原理

竖排文字需解决两个核心问题：

坐标转换：将常规横排文字的X/Y坐标转换为竖排坐标系
字符旋转：每个字符需旋转90度或270度

方案一：逐字符绘制法

function drawVerticalText(ctx, text, x, y, options = {}) {
  const { 
    fontSize = 16, 
    color = '#000',
    direction = 'right' // 'right'或'left'
  } = options
  ctx.setFontSize(fontSize)
  ctx.setFillStyle(color)
  for (let i = 0; i < text.length; i++) {
    ctx.save()
    ctx.translate(x, y + i * fontSize)
    if (direction === 'right') {
      ctx.rotate(Math.PI / 2) // 顺时针90度
    } else {
      ctx.rotate(-Math.PI / 2) // 逆时针90度
    }
    ctx.fillText(text[i], 0, 0)
    ctx.restore()
  }
}
// 使用示例
drawVerticalText(ctx, '竖排文字', 100, 50, {
  fontSize: 18,
  direction: 'right'
})

方案二：文本块旋转法（适合固定宽度）

function drawVerticalTextBlock(ctx, text, x, y, width, options) {
  const lines = []
  let currentLine = ''
  // 简单分词（实际应用需更复杂的分词逻辑）
  for (const char of text) {
    const testLine = currentLine + char
    const metrics = ctx.measureText(testLine)
    if (metrics.width <= width) {
      currentLine = testLine
    } else {
      lines.push(currentLine)
      currentLine = char
    }
  }
  lines.push(currentLine)
  // 绘制
  lines.forEach((line, i) => {
    ctx.save()
    ctx.translate(x, y + i * (options.fontSize || 16))
    ctx.rotate(Math.PI / 2)
    ctx.fillText(line, 0, 0)
    ctx.restore()
  })
}

2. 性能优化策略

文本缓存：对静态文本预先渲染到离屏Canvas
```javascript
// 创建离屏Canvas
const offscreenCtx = wx.createOffscreenCanvas({
type: ‘2d’,
width: 200,
height: 600
})

// 预先绘制竖排文本
function preRenderVerticalText(text) {
const ctx = offscreenCtx.getContext(‘2d’)
// …绘制逻辑
return offscreenCtx.toTempFilePath()
}


2. **批量绘制**：合并多个绘制操作为一次draw调用
```javascript
// 错误示例：多次draw导致闪烁
text.split('').forEach(char => {
  ctx.fillText(char, x, y++)
  ctx.draw() // 每次调用都触发渲染
})
// 正确示例：批量处理
const drawCommands = []
text.split('').forEach((char, i) => {
  drawCommands.push({
    type: 'text',
    char,
    x,
    y: y + i * fontSize,
    rotate: Math.PI/2
  })
})
// 执行批量绘制
drawCommands.forEach(cmd => {
  ctx.save()
  ctx.translate(cmd.x, cmd.y)
  ctx.rotate(cmd.rotate)
  ctx.fillText(cmd.char, 0, 0)
  ctx.restore()
})
ctx.draw()

四、综合应用案例：海报生成器

// 海报配置
const posterConfig = {
  width: 750,
  height: 1000,
  bgColor: '#ffffff',
  title: '活动海报',
  subTitle: '2024年春季特惠',
  mainImage: 'https://example.com/main.jpg',
  qrCode: 'https://example.com/qr.jpg',
  verticalText: '限时抢购\n机会难得\n不容错过'
}
function generatePoster() {
  const ctx = wx.createCanvasContext('posterCanvas')
  // 1. 绘制背景
  ctx.setFillStyle(posterConfig.bgColor)
  ctx.fillRect(0, 0, posterConfig.width, posterConfig.height)
  // 2. 绘制主图
  const mainImg = wx.createImage()
  mainImg.src = posterConfig.mainImage
  mainImg.onload = () => {
    ctx.drawImage(mainImg, 50, 100, 650, 400)
    // 3. 绘制标题
    ctx.setFontSize(36)
    ctx.setFillStyle('#333333')
    ctx.setTextAlign('center')
    ctx.fillText(posterConfig.title, posterConfig.width/2, 550)
    // 4. 绘制竖排文字
    drawVerticalText(ctx, posterConfig.verticalText, 
      posterConfig.width - 80, 600, {
        fontSize: 24,
        color: '#e74c3c',
        direction: 'right'
      })
    // 5. 绘制二维码
    const qrImg = wx.createImage()
    qrImg.src = posterConfig.qrCode
    qrImg.onload = () => {
      ctx.drawImage(qrImg, posterConfig.width - 120, 850, 100, 100)
      ctx.draw()
    }
  }
}
// 改进版：使用Promise确保加载顺序
function generatePosterPro() {
  return new Promise((resolve) => {
    const ctx = wx.createCanvasContext('posterCanvas')
    const loadTasks = []
    // 主图加载
    const mainImg = wx.createImage()
    mainImg.src = posterConfig.mainImage
    loadTasks.push(new Promise(r => {
      mainImg.onload = () => {
        ctx.drawImage(mainImg, 50, 100, 650, 400)
        r()
      }
    }))
    // 二维码加载
    const qrImg = wx.createImage()
    qrImg.src = posterConfig.qrCode
    loadTasks.push(new Promise(r => {
      qrImg.onload = () => {
        r()
      }
    }))
    Promise.all(loadTasks).then(() => {
      // 绘制静态内容
      ctx.setFillStyle(posterConfig.bgColor)
      ctx.fillRect(0, 0, posterConfig.width, posterConfig.height)
      ctx.setFontSize(36)
      ctx.setFillStyle('#333333')
      ctx.setTextAlign('center')
      ctx.fillText(posterConfig.title, posterConfig.width/2, 550)
      drawVerticalText(ctx, posterConfig.verticalText, 
        posterConfig.width - 80, 600, {
          fontSize: 24,
          color: '#e74c3c',
          direction: 'right'
        })
      ctx.drawImage(qrImg, posterConfig.width - 120, 850, 100, 100)
      ctx.draw()
      resolve()
    })
  })
}

五、常见问题与解决方案

1. 图片绘制不显示

原因：未等待图片加载完成即执行绘制
解决：确保在img.onload回调中执行绘制操作

扩展：对于网络图片，建议设置超时机制

function loadImageWithTimeout(url, timeout = 5000) {
return new Promise((resolve, reject) => {
  const img = wx.createImage()
  img.src = url
  const timer = setTimeout(() => {
    reject(new Error('Image load timeout'))
  }, timeout)
  img.onload = () => {
    clearTimeout(timer)
    resolve(img)
  }
  img.onerror = () => {
    clearTimeout(timer)
    reject(new Error('Image load failed'))
  }
})
}

2. 竖排文字间距异常

原因：未考虑字体基线偏移

解决：调整字符绘制位置

// 改进后的字符绘制
function drawChar(ctx, char, x, y, fontSize) {
ctx.save()
ctx.translate(x, y)
ctx.rotate(Math.PI / 2)
// 测量文本宽度（竖排时实际是高度）
const metrics = ctx.measureText(char)
// 调整基线位置（根据字体特性可能需要微调）
const baselineOffset = fontSize * 0.2 
ctx.fillText(char, 0, baselineOffset)
ctx.restore()
}

3. Canvas层级问题

现象：Canvas内容被其他组件遮挡
解决：
- 设置canvas-id对应的元素style="position: fixed; z-index: 999;"
- 使用wx.createOffscreenCanvas()进行离屏渲染

六、性能优化最佳实践

减少draw调用次数：
- 合并所有绘制操作为一次draw调用
- 使用ctx.beginPath()和ctx.closePath()明确绘图范围
合理使用离屏Canvas：
- 对静态内容预先渲染
- 复杂图形分解为多个简单图形分别渲染
图片优化：
- 控制图片尺寸不超过实际显示大小
- 使用WebP格式减少体积
- 对大图进行分块加载
内存管理：
- 及时释放不再使用的Image对象
- 避免在onLoad中创建过多临时变量
动画优化：
- 使用requestAnimationFrame替代setTimeout
- 对动画元素使用单独的Canvas层

通过系统掌握上述技术要点，开发者可以高效实现小程序中复杂的图片处理与竖排文字渲染需求，创建出专业级的视觉效果。实际开发中，建议结合小程序官方文档的Canvas组件说明进行调试，特别注意不同基库版本的API差异。

小程序Canvas绘制：图片与竖排文字实现指南