按照微信小程序文档中的 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 函数被干掉了。
推荐继续阅读
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式