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

小程序Canvas组件作为2D图形渲染核心，其工作模式分为模板模式与2D渲染模式。推荐使用2D渲染模式（type=”2d”），该模式基于WebGL实现硬件加速，性能较传统模板模式提升40%以上。在绘制图片和文字时，需特别注意画布尺寸设置，建议通过wx.getSystemInfo获取设备像素比（devicePixelRatio），动态计算画布实际宽高：

const systemInfo = wx.getSystemInfoSync();
const dpr = systemInfo.pixelRatio;
this.setData({
  canvasWidth: 300 * dpr,
  canvasHeight: 500 * dpr
});

二、图片绘制的核心实现

1. 图片资源加载机制

小程序要求所有图片必须通过wx.downloadFile或本地路径加载，网络图片需配置download域名白名单。推荐使用Promise封装图片加载流程：

function loadImage(src) {
  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: src,
      success: (res) => resolve(res.path),
      fail: reject
    });
  });
}

2. 精确绘制控制

绘制图片时需处理三个关键参数：

• 目标位置（x,y）：注意坐标原点在画布左上角
• 目标尺寸（width,height）：可通过scale()变换实现缩放
• 裁剪区域（sx,sy,sWidth,sHeight）：实现图片局部绘制

完整绘制示例：

async function drawImage(ctx, imagePath) {
  try {
    const imgPath = await loadImage(imagePath);
    ctx.drawImage(imgPath, 50, 100, 200, 150); // 基础绘制
    // 带裁剪的绘制
    ctx.drawImage(imgPath, 30, 30, 100, 100, 80, 200, 100, 100);
  } catch (e) {
    console.error('图片加载失败', e);
  }
}

3. 性能优化策略

• 批量绘制：使用ctx.beginPath()和ctx.closePath()减少绘制调用
• 离屏缓存：对重复使用的图片元素，先绘制到临时canvas再复用
• 资源释放：通过ctx.clearRect()及时清理不再需要的绘制内容

三、竖排文字的实现原理

1. 文字旋转数学模型

竖排文字的核心是通过rotate()实现坐标系变换。需注意：

• 旋转中心点设置：默认是(0,0)，需通过translate()调整
• 文字方向控制：顺时针旋转90度实现从左到右的竖排
• 基线对齐：使用textAlign和textBaseline控制文字位置

数学推导示例：

原始坐标系(x,y) → 旋转90度后坐标系(y,-x)
实际绘制点(x',y') = (y*cosθ - x*sinθ, y*sinθ + x*cosθ)
当θ=90°时，简化为(x',y') = (-y, x)

2. 完整实现代码

function drawVerticalText(ctx, text, x, y, options = {}) {
  const {
    fontSize = 16,
    color = '#000',
    lineHeight = 20,
    maxWidth = 100
  } = options;
  ctx.save();
  ctx.setFontSize(fontSize);
  ctx.setFillStyle(color);
  // 计算文字总高度
  const textHeight = fontSize * Math.ceil(text.length * fontSize / maxWidth) / fontSize;
  // 设置旋转中心点
  ctx.translate(x, y);
  ctx.rotate(-90 * Math.PI / 180); // 逆时针旋转90度
  // 分割文字为多行（竖排时实际是列）
  const lines = [];
  let currentLine = '';
  for (const char of text) {
    const testLine = currentLine + char;
    const metrics = ctx.measureText(testLine);
    if (metrics.width <= maxWidth) {
      currentLine = testLine;
    } else {
      lines.push(currentLine);
      currentLine = char;
    }
  }
  lines.push(currentLine);
  // 绘制每行文字
  lines.forEach((line, index) => {
    ctx.fillText(
      line,
      0, 
      index * lineHeight // 竖排时y坐标对应行号
    );
  });
  ctx.restore();
}

3. 高级排版技巧

• 混合排版：结合horizontal属性实现部分竖排
• 标点符号处理：使用正则表达式调整标点位置
• 动态行高：根据字体大小自动计算最佳行距

四、综合应用案例

1. 海报生成器实现

Page({
  async onReady() {
    const ctx = wx.createCanvasContext('posterCanvas', this);
    // 1. 绘制背景图
    await drawImage(ctx, '/assets/bg.jpg');
    // 2. 绘制竖排标题
    drawVerticalText(ctx, '诗意江南', 150, 80, {
      fontSize: 24,
      color: '#fff',
      maxWidth: 30
    });
    // 3. 绘制横排说明
    ctx.setFontSize(14);
    ctx.setFillStyle('#333');
    ctx.fillText('水墨丹青绘就千年风华', 50, 300);
    ctx.draw();
  },
  savePoster() {
    wx.canvasToTempFilePath({
      canvasId: 'posterCanvas',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath
        });
      }
    });
  }
});

2. 动态数据适配方案

针对不同屏幕尺寸，建议采用比例布局：

function getAdaptivePosition(designWidth, designHeight, actualWidth, actualHeight) {
  const scaleX = actualWidth / designWidth;
  const scaleY = actualHeight / designHeight;
  return {
    x: 100 * scaleX,  // 设计稿中100px的位置
    y: 150 * scaleY
  };
}

五、常见问题解决方案

1. 图片显示模糊

• 原因：未考虑devicePixelRatio
• 解决：按设备像素比放大画布，绘制时相应缩小

  const dpr = wx.getSystemInfoSync().pixelRatio;
  ctx.scale(dpr, dpr); // 缩放画布坐标系

2. 竖排文字错位

• 原因：未正确计算旋转后的坐标系
• 解决：确保每次绘制前调用ctx.save()，绘制后调用ctx.restore()

3. 性能卡顿

• 优化点：
  • 减少drawImage调用次数
  • 对静态内容使用离屏canvas
  • 控制单次绘制复杂度（建议不超过200个绘制指令）

六、进阶优化方向

1. WebGL加速：通过three.js等库实现更复杂的图形渲染
2. 动画系统：结合wx.createSelectorQuery实现帧动画
3. 跨平台兼容：封装统一的绘图接口适配不同小程序平台

通过系统掌握上述技术要点，开发者可以高效实现包含复杂排版需求的小程序功能。实际开发中建议建立基础组件库，将常用绘图功能封装为可复用组件，大幅提升开发效率。