一、Canvas在小程序中的基础定位

小程序Canvas组件作为2D图形渲染核心，通过JavaScript API实现像素级控制，相比WXML布局具有更高的自由度。在海报生成、数据可视化等场景中，Canvas的矢量绘制能力远超传统DOM方案。其核心优势体现在：

1. 硬件加速渲染：利用GPU提升复杂图形处理效率
2. 离屏渲染支持：可通过canvasToTempFilePath实现无界面渲染
3. 跨平台一致性：避免不同机型屏幕适配的兼容性问题

二、图片绘制技术实现

1. 基础图片加载

const ctx = wx.createCanvasContext('myCanvas')
wx.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: (res) => {
    ctx.drawImage(res.path, 0, 0, 300, 200)
    ctx.draw()
  }
})

关键参数说明：

• drawImage(imageResource, dx, dy, dWidth, dHeight)：支持本地路径、网络URL、Base64三种资源类型
• 坐标系统：以Canvas左上角为原点(0,0)，x向右递增，y向下递增

2. 高级图片处理

2.1 图片裁剪与缩放

// 保持宽高比缩放
const calcScale = (origWidth, origHeight, targetWidth) => {
  const scale = targetWidth / origWidth
  return {
    width: targetWidth,
    height: origHeight * scale
  }
}
// 九宫格裁剪示例
ctx.drawImage(
  'image.jpg',
  srcX, srcY, srcWidth, srcHeight,  // 源图裁剪区域
  dstX, dstY, dstWidth, dstHeight   // 目标绘制区域
)

2.2 图片合成技术

通过多层绘制实现水印效果：

// 绘制背景图
ctx.drawImage('bg.jpg', 0, 0, 300, 500)
// 设置混合模式
ctx.setGlobalAlpha(0.5)  // 透明度
ctx.drawImage('watermark.png', 100, 200, 100, 30)
ctx.setGlobalAlpha(1)

三、竖排文字实现方案

1. 旋转绘制法（推荐）

const drawVerticalText = (ctx, text, x, y, options = {}) => {
  const { 
    fontSize = 16, 
    color = '#000', 
    lineHeight = 20,
    textAlign = 'left'
  } = options
  ctx.save()
  ctx.setFontSize(fontSize)
  ctx.setFillStyle(color)
  ctx.setTextAlign(textAlign)
  // 旋转坐标系（顺时针90度）
  ctx.translate(x, y)
  ctx.rotate(-Math.PI / 2)
  // 逐字符绘制
  for (let i = 0; i < text.length; i++) {
    ctx.fillText(
      text[i], 
      0, 
      i * lineHeight  // 垂直间距控制
    )
  }
  ctx.restore()
}
// 使用示例
drawVerticalText(ctx, '竖排文字示例', 150, 100, {
  fontSize: 18,
  color: '#333',
  lineHeight: 24
})

2. 坐标映射法

通过数学变换实现更灵活的排版：

const drawVerticalTextMapped = (ctx, text, startX, startY, options) => {
  const { 
    direction = 'topToBottom',  // 'topToBottom' | 'bottomToTop'
    charSpacing = 0 
  } = options
  ctx.save()
  const chars = text.split('')
  chars.forEach((char, index) => {
    const yPos = direction === 'topToBottom' 
      ? startY + index * (options.fontSize + charSpacing)
      : startY - index * (options.fontSize + charSpacing)
    ctx.fillText(char, startX, yPos)
  })
  ctx.restore()
}

四、性能优化策略

1. 离屏渲染技术

// 创建离屏Canvas
const offscreenCtx = wx.createOffscreenCanvas({
  type: '2d',
  width: 300,
  height: 500
})
// 在离屏Canvas上绘制
offscreenCtx.drawImage(...)
offscreenCtx.fillText(...)
// 最终绘制到屏幕Canvas
const tempFilePath = await offscreenCtx.toTempFilePath()
ctx.drawImage(tempFilePath, 0, 0)

2. 分层渲染策略

将静态背景与动态内容分离：

// 绘制静态层（只需执行一次）
const drawStaticLayer = () => {
  const staticCtx = wx.createCanvasContext('staticCanvas')
  staticCtx.drawImage('bg.jpg', 0, 0)
  staticCtx.draw()
}
// 动态更新层
const updateDynamicLayer = (text) => {
  const dynamicCtx = wx.createCanvasContext('dynamicCanvas')
  drawVerticalText(dynamicCtx, text, 100, 50)
  dynamicCtx.draw()
}

3. 脏矩形技术

仅更新变化区域：

let lastTextLength = 0
const updateText = (newText) => {
  const ctx = wx.createCanvasContext('myCanvas')
  const charDiff = Math.abs(newText.length - lastTextLength)
  // 计算受影响区域
  const affectedHeight = charDiff * 20  // 假设行高20px
  // 清除旧区域
  ctx.clearRect(50, 0, 200, affectedHeight)
  // 重新绘制
  drawVerticalText(ctx, newText, 100, 20)
  ctx.draw()
  lastTextLength = newText.length
}

五、常见问题解决方案

1. 图片加载失败处理

wx.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: (res) => {
    // 成功处理
  },
  fail: (err) => {
    console.error('图片加载失败:', err)
    // 显示占位图或默认图片
    ctx.drawImage('/assets/placeholder.png', 0, 0)
  }
})

2. 文字排版错位问题

• 原因分析：字体回退机制导致实际渲染字体与预期不符
• 解决方案：

  // 明确指定字体族
  ctx.setFontSize(16)
  ctx.setFontFamily('"PingFang SC", "Helvetica Neue", Arial')

3. 跨设备适配方案

// 获取设备信息
const systemInfo = wx.getSystemInfoSync()
const dpr = systemInfo.pixelRatio  // 设备像素比
// 创建Canvas时考虑dpr
const canvasWidth = 300
const canvasHeight = 500
const ctx = wx.createCanvasContext('myCanvas', {
  width: canvasWidth * dpr,
  height: canvasHeight * dpr,
  style: {
    width: `${canvasWidth}px`,
    height: `${canvasHeight}px`
  }
})
// 绘制时需要乘以dpr
ctx.drawImage('image.jpg', 0, 0, 300 * dpr, 200 * dpr)

六、完整示例代码

Page({
  onReady() {
    this.drawPoster()
  },
  drawPoster() {
    const ctx = wx.createCanvasContext('posterCanvas')
    const dpr = wx.getSystemInfoSync().pixelRatio
    // 绘制背景
    ctx.setFillStyle('#f8f8f8')
    ctx.fillRect(0, 0, 375 * dpr, 600 * dpr)
    // 加载并绘制图片
    wx.getImageInfo({
      src: 'https://example.com/bg.jpg',
      success: (imgRes) => {
        ctx.drawImage(imgRes.path, 0, 0, 375 * dpr, 400 * dpr)
        // 绘制竖排文字
        this.drawVerticalText(ctx, '小程序Canvas演示', 
          200 * dpr, 150 * dpr, {
          fontSize: 24 * dpr,
          color: '#ffffff',
          lineHeight: 30 * dpr
        })
        ctx.draw()
      }
    })
  },
  drawVerticalText(ctx, text, x, y, options) {
    const { fontSize, color, lineHeight } = options
    ctx.save()
    ctx.setFontSize(fontSize)
    ctx.setFillStyle(color)
    ctx.translate(x, y)
    ctx.rotate(-Math.PI / 2)
    for (let i = 0; i < text.length; i++) {
      ctx.fillText(text[i], 0, i * lineHeight)
    }
    ctx.restore()
  }
})

七、最佳实践建议

1. 资源预加载：在页面onLoad阶段提前加载所有图片资源
2. 防抖处理：对频繁触发的绘制操作进行节流
3. 内存管理：及时释放不再使用的Canvas上下文
4. 渐进式渲染：对复杂图形分步绘制，避免界面卡顿
5. 错误边界：为关键绘制操作添加try-catch捕获异常

通过掌握上述技术方案，开发者可以高效实现小程序中的复杂图形渲染需求，特别是在海报生成、数据可视化等场景中构建出专业级的交互体验。实际开发中建议结合小程序官方文档的Canvas 2D上下文规范进行调试优化。