微信小程序 canvas 基础使用

按照微信小程序文档中的 canvas 使用 demo：

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

写了个 hello world 测试：

模板文件

<canvas style="width: 300px; height: 200px;" canvas-id="demo"></canvas>

JS 文件

onReady 中执行：

var context = wx.createCanvasContext('demo')

context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.draw()

显示效果

stroke 与 draw 函数的区别

只调用 stroke ，但是不调用 draw 时，无法显示图形。

对比一下这两个函数的文档说明：

• CanvasContext.stroke() 画出当前路径的边框。默认颜色色为黑色。
  
• CanvasContext.draw(boolean reserve, function callback) 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
  

从 API 文档上看，似乎 draw 比 stroke 多了样式和变形。

那不如果，不调用 stroke，只调用 draw 呢？

同样不显示。。。

也就是说，只有同时调用这两个函数的时候，才能显示出图形。

大快人心的是，在最新的微信小程序 canvas 2d 中，draw 函数被干掉了。

推荐继续阅读

• canvas 2d 接口支持同层渲染且性能更佳，建议切换使用

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式