微信小程序开发实战（17）：用画布画一张笑脸

痛定思痛。 2023-03-06 03:40 15阅读 0赞

小程序的画布允许绘制基础的图形，如直线、圆等。画布需要使用<canvas>标签，例如，下面的布局代码使用了<canvas>标签定义了一个300\*200的画布。

在<canvas>标签中使用了一个重要的属性canvas-id，该属性用于指定画布的ID，同一个页面，不能存在两个或两个以上相同ID的画布。

我们可以通过下面的JavaScript代码在画布上绘制一个笑脸。

Page({
      onReady: function (e) {
     
        // 使用 wx.createContext 获取绘图上下文 context
        var context = wx.createContext()
     
        context.setStrokeStyle("#0000ff")
        context.setLineWidth(5)
        context.rect(0, 0, 200, 200)
        context.stroke()
        context.setStrokeStyle("#ff00ff")
        context.setLineWidth(2)
        context.moveTo(160, 100)
        context.arc(100, 100, 60, 0, 2 * Math.PI, true)
        context.moveTo(140, 100)
        context.arc(100, 100, 40, 0, Math.PI, false)
        context.moveTo(85, 80)
        context.arc(80, 80, 5, 0, 2 * Math.PI, true)
        context.moveTo(125, 80)
        context.arc(120, 80, 5, 0, 2 * Math.PI, true)
        context.stroke()
     
        // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
        wx.drawCanvas({
          canvasId: 'mycanvas',
          actions: context.getActions() // 获取绘图动作数组
        })
      }
    })

当系统装载时，会调用onReady函数，在该函数中利用context绘制相应的图形，最后通过wx.drawCanvas方法指定要在哪个画布上绘制图像，绘制的效果如图1所示。

![format_png][]

图 1 画布演示效果

其中wx.drawCanvas方法的第二个参数actions指定当前绘制行为使用到的设置绘制风格的一些函数，如果将context.getActions方法返回的信息输出到Console，会看到如图2所示的日志信息。

![format_png 1][]

图2  context.getActions方法输出的日志信息

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 2][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 3][]

[format_png]: /images/20230208/2db0703e35d04032b4b16d117b5b2c40.png
[format_png 1]: /images/20230208/854409b734784a03a3300205b5fad2a4.png
[format_png 2]: /images/20230208/6088ed5653fb4a78af5dad8c98224b5d.png
[format_png 3]: /images/20230208/f78ce3551e6849ebbae0d180899d2a4a.png