小程序canvas基础绘制流程是怎样的？

做小程序开发时，不少场景需要用canvas画海报、做互动动画、生成数据图表，但新手一上手就碰到“画不出图形”“手机上模糊”“动画卡顿”这些问题，今天把小程序canvas绘制从入门到实战的关键问题拆成6个板块,帮你避坑又高效落地！

要在小程序里用canvas画画，得先理清「组件创建→获取上下文→绘制操作→渲染显示」这四个核心步骤。

首先在wxml里放canvas组件，注意要给        标签加type="2d"（小程序新版2d上下文更易用，旧版canvas已逐渐被替代），还要设置宽高：

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

然后在js里，通过选择器获取canvas实例，再创建2d上下文，举个简单例子：

Page({  onReady() {    const query = wx.createSelectorQuery()    query.select('#myCanvas')      .fields({ node: true, size: true })      .exec((res) => {        const canvas = res[0].node // 获取canvas节点        const ctx = canvas.getContext('2d') // 创建2d绘图上下文<pre>    // 用ctx调用绘制方法：画红色矩形<br/>    ctx.fillStyle = 'red'<br/>    ctx.fillRect(50, 50, 100, 100) // x=50,y=50,宽100,高100<br/>    // 新版2d上下文用requestAnimationFrame触发渲染<br/>    canvas.requestAnimationFrame(() => {<br/>      ctx.draw() <br/>    })<br/>  })<br/></pre>

这里要注意：旧版canvas用wx.createCanvasContext，新版2d上下文是通过canvas.getContext('2d')获取，API更接近H5标准，而且绘制完后要调用draw()或者结合requestAnimationFrame触发渲染，否则画面出不来。

怎么用canvas画常见图形？

canvas能画的基础元素就那么几类，但每个细节没处理好就容易「翻车」，分场景拆解：

矩形（含填充/描边）

用fillRect(x,y,width,height)画实心矩形，strokeRect()画边框，比如想画个蓝色边框、透明填充的矩形：

ctx.strokeStyle = 'blue'ctx.lineWidth = 3ctx.strokeRect(20, 20, 150, 80) // 画蓝色边框<p>ctx.fillStyle = 'rgba(0,0,255,0.2)'ctx.fillRect(20, 20, 150, 80) // 画透明填充</p>

圆形/圆弧

画圆得用arc(x,y,radius,startAngle,endAngle,anticlockwise)，注意角度是弧度制（π≈3.14159），比如画个黄色实心圆：

ctx.beginPath() // 开始新路径（避免和其他图形混淆）ctx.arc(150, 150, 50, 0, 2 * Math.PI) // 圆心(150,150)，半径50，0到2π是整圆ctx.fillStyle = 'yellow'ctx.fill()如果只画圆弧，调整startAngle和endAngle就行，比如画半圆把endAngle改成Math.PI。

文字绘制

用fillText(text,x,y)写文字，还要注意字体、对齐方式，比如居中显示一行文字：

ctx.font = '24px 微软雅黑'ctx.textAlign = 'center' // 文字水平居中ctx.textBaseline = 'middle' // 文字垂直居中ctx.fillStyle = '#333'ctx.fillText('这是测试文字', 150, 150) // 坐标(150,150)是文字中心

图片绘制

画图片得先加载图片资源，小程序里用canvas.createImage()创建图片对象，onload后再绘制，比如把网络图片画到canvas：

const img = canvas.createImage()img.src = 'https://xxx.com/avatar.png' // 替换成实际图片地址img.onload = () => {  ctx.drawImage(img, 50, 50, 100, 100) // 图片位置x=50,y=50，宽高100}这里必须等图片onload后再drawImage，否则会画空。

canvas动画效果怎么实现？

想让canvas里的元素动起来，核心逻辑是「清屏→重绘→循环」，以「小球从左往右移动」为例：

1. 逐帧更新位置：用requestAnimationFrame（比setInterval更流畅，适配刷新率）循环执行绘制函数。

2. 清屏：每次重绘前用clearRect(x,y,width,height)清空画布，或者画个和背景同色的矩形覆盖。

3. 重绘元素：根据最新位置重新画图形。

代码逻辑大概这样：

Page({  onReady() {    // 前面获取canvas和ctx的步骤省略...    let x = 0 // 小球初始x坐标    const drawFrame = () => {      ctx.clearRect(0, 0, 300, 300) // 清空整个画布（宽高300）      ctx.beginPath()      ctx.arc(x, 150, 20, 0, 2 * Math.PI)      ctx.fillStyle = 'green'      ctx.fill()      x += 2 // 每次移动2px      if (x < 300) { // 没超出画布就继续循环        canvas.requestAnimationFrame(drawFrame)      }    }    canvas.requestAnimationFrame(drawFrame)  }})

要是做更复杂的动画（比如多元素、曲线运动），可以给每个元素维护坐标、速度、加速度等参数，每一帧更新后重绘。

canvas绘制时性能差、卡顿怎么优化？

很多人做复杂绘制（比如长海报、多动画）时，手机一运行就卡，这几个优化点要记牢：

用「离屏canvas」预处理

如果有重复绘制的元素（比如海报里的固定底图、边框），可以先在「离屏canvas」上画好，再复制到主canvas，小程序里用wx.createOffscreenCanvas创建离屏画布，画完后把内容转成图片，再画到主canvas，减少重复计算。

合并绘制操作，减少draw()调用

新版2d上下文里，draw()是触发渲染的关键，但频繁调用会卡顿，尽量把多个绘制操作合并到一次draw()前完成，比如先把所有图形画到上下文，最后统一渲染。

图片预加载+缓存

绘制前把所有要用的图片（比如海报里的商品图、头像）提前加载好，存在数组里，避免绘制时等待图片加载，还能把常用图片转成base64缓存，减少网络请求。

避免频繁创建上下文

有些同学习惯每次绘制都重新获取ctx，其实ctx是可以复用的，只要canvas实例还在，就一直用同一个上下文对象。

不同设备屏幕适配怎么处理？

最常见的问题是「canvas在手机上模糊」，本质是**像素比（devicePixelRatio）**没处理，手机屏幕的物理像素和小程序的逻辑像素不是1:1，比如iPhone12的devicePixelRatio是3，逻辑像素画的内容会被放大，导致模糊。

解决步骤：

1. 获取设备像素比：通过wx.getSystemInfoSync().devicePixelRatio拿到。

2. 设置canvas的宽高：逻辑像素宽高 = 设计稿宽度 / 像素比，样式宽高 = 设计稿宽度（让canvas在页面上显示正确大小）。

3. 缩放绘图上下文：ctx.scale(ratio, ratio)，让绘制的内容适配物理像素。

举个适配例子（假设设计稿宽度375px）：

Page({  onReady() {    const systemInfo = wx.getSystemInfoSync()    const ratio = systemInfo.devicePixelRatio    const designWidth = 375 // 设计稿宽度    const canvasWidth = designWidth / ratio // 逻辑像素宽    const canvasHeight = 667 / ratio // 假设设计稿高度667<pre>// wxml里canvas的style设为width:375px; height:667px;<br/>// 获取canvas后设置宽高<br/>canvas.width = canvasWidth * ratio <br/>canvas.height = canvasHeight * ratio <br/>const ctx = canvas.getContext('2d')<br/>ctx.scale(ratio, ratio) // 缩放上下文，1逻辑像素对应ratio物理像素<br/>// 之后绘制时，坐标按设计稿的逻辑像素来，比如画矩形x=100,y=100<br/>ctx.fillRect(100, 100, 100, 100)<br/></pre>这样处理后，canvas内容在高清屏上就不会模糊了。

实战：用canvas生成分享海报要注意什么？

很多小程序需要生成带用户信息、商品信息的分享海报，这场景里坑最多，拆解关键步骤：

布局规划：分层绘制

把海报分成「背景层→固定元素层（如边框、Logo）→动态内容层（用户头像、昵称、商品图）→二维码层」，分层绘制能避免元素覆盖混乱。

图片加载：Promise化处理

因为要加载多张图片（用户头像、商品图、二维码），用Promise.all统一管理加载状态，确保所有图片加载完再绘制，否则会出现「图片没画出来」的情况，示例：

// 封装图片加载函数function loadImage(src) {  return new Promise((resolve) => {    const img = canvas.createImage()    img.src = src    img.onload = () => resolve(img)  })}<p>// 调用时const [avatarImg, productImg, qrImg] = await Promise.all([loadImage('用户头像地址'),loadImage('商品图地址'),loadImage('二维码地址')])// 加载完再drawImagectx.drawImage(avatarImg, 50, 50, 80, 80)</p>

文字自动换行：计算每行长度

如果用户昵称很长，要自动换行，得循环切割字符串：

function drawMultilineText(ctx, text, x, y, maxWidth, lineHeight) {  const words = text.split('')  let line = ''  for (let i = 0; i < words.length; i++) {    const testLine = line + words[i]    const metrics = ctx.measureText(testLine)    if (metrics.width > maxWidth && i > 0) {      ctx.fillText(line, x, y)      line = words[i]      y += lineHeight    } else {      line = testLine    }  }  ctx.fillText(line, x, y)}// 调用：drawMultilineText(ctx, '很长的用户昵称...', 100, 200, 200, 30)

保存到相册：处理权限和临时文件

绘制完海报后，用wx.canvasToTempFilePath把canvas转成临时图片地址，再用wx.saveImageToPhotosAlbum保存到相册，要注意：

• 调用saveImageToPhotosAlbum前，需先申请相册权限（用wx.authorize({scope: 'scope.writePhotosAlbum'})）。

• 确保canvasToTempFilePath的canvas参数正确（新版2d上下文要传canvas实例）。

从小程序canvas的基础绘制到实战海报生成，关键得吃透「上下文操作→渲染机制→设备适配→性能优化」这几个环节，刚开始练手可以从画简单矩形、圆形入手，再逐步叠加文字、图片、动画，遇到问题时先检查「是否漏了draw()」「图片是否onload后绘制」「像素比有没有处理」这几个点，多做几个实战案例（比如生成海报、做个简单绘图板、实现进度条动画）,对canvas的掌控力自然就上来了～