微信小程序Canvas画布绘制图片、文字、矩形、（椭）圆、直线

目录

获取CanvasRenderingContext2D 对象

绘制图片

绘制Text

绘制矩形

绘制（椭）圆

绘制直线 

---

获取CanvasRenderingContext2D 对象

.whml

<canvas class="canvas" type="2d" id="myCanvas"/>

定义canvas元素，需要设置type="2d"，后续在js可通过Canvas.getContext('2d') 接口可以获取 CanvasRenderingContext2D对象，用以在画布绘制图形。

.wxss

.canvas{
  background-color: white;
  height: 65vh;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;  
}

定义canvas显示样式，包含宽度、高度、背景色等，也可自定义其他显示样式。 

.js

onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
    .fields({ node: true, size: true })
    .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')