微信小程序canvas画布组件，绘制笑脸，修改旧画布示例

关注

原创最新推荐文章于 2026-03-10 00:46:51 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

前端使用Canvas实现一个图片编辑组件实现一个图片编辑组件，包含画笔、记号笔、折线、矩形、马赛克、裁剪、编辑历史记录(撤销和重做)、更改颜色和线宽功能，以及取消编辑和保存。未经作者授权禁止转载！阅读详情

这是微信开发者文档canvas旧版示例代码效果图，运用

wx.createCanvasContext('firstCanvas')

但是已经被弃用了，需要使用新的接口Canvas 2D，下面我们就用新街口改写旧版示例。

wxml代码：

<!--canvas组件-->
<canvas id="myCanvas" type="2d" style="margin:20rpx;width: 300px; height: 200px;"  bindtouchstart="start"  bindtouchmove="move"  bindtouchend="end"/>

<!--通过canvas的start move end事件获取画布中的坐标点x y-->
<view hidden="{{hidden}}">
  Coordinates: ({{x}}, {{y}})
</view>

js逻辑代码：

// pages/canvas/canvas.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    x: 0,
    y: 0,
    hidden: true
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    wx.createSelectorQuery()
    .select('#myCanvas') // 在 WXML 中填入的 id
    .fields({ node: true, size: true })
    .exec((res) => {
        // Canvas 对象
        const canvas = res[0].node
        // 渲染上下文
        const ctx = canvas.getContext('2d')

        // Canvas 画布的实际绘制宽高
        const width = res[0].width
        const height = res[0].height

        // 初始化画布大小
        const dpr = wx.getWindowInfo().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)
        // 清空画布
        ctx.clearRect(0, 0, width, height)
        //绘制方形
        ctx.strokeStyle = "#00ff00";//路径颜色
        ctx.lineWidth = 5;//路径宽度
        ctx.rect(0,0,200,200);//方形区域
        ctx.stroke();//开始绘制方形
        //绘制圆形
        //arc(x,y,r,sAngle,eAngle,counterclockwise)绘制圆形
        // 参数
        // x	Number	圆的x坐标
        // y	Number	圆的y坐标
        // r	Number	圆的半径
        // sAngle	Number	起始弧度，单位弧度（在3点钟方向）
        // eAngle	Number	终止弧度
        //counterclockwise	Boolean	可选。指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针。
        ctx.strokeStyle = "#ff0000";
        ctx.lineWidth = 2;
        ctx.moveTo(160,100);//移动至坐标160 100        
        ctx.beginPath();//开始新路径
        ctx.arc(100,100,60,0,2*Math.PI,true);
        ctx.moveTo(140,100);
        ctx.arc(100,100,40,0,Math.PI,false);
        ctx.moveTo(85,80);
        ctx.arc(80,80,5,0,2*Math.PI);
        ctx.moveTo(125,80)
        ctx.arc(120,80,5,0,2*Math.PI);
        ctx.stroke();        
    })
  },
  start: function(e) {
    this.setData({
      hidden: false,
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  move: function(e) {
    this.setData({
      x: e.touches[0].x,
      y: e.touches[0].y
    })
  },
  end: function(e) {
    this.setData({
      hidden: true
    })
  }
})

收录于