用canvas做的小程序

在微信小程序中，可以使用 Canvas 来实现各种图形的绘制和动画效果。以下是一个简单的 Canvas 示例，用于在微信小程序中绘制一个矩形：

1. 在 pages 目录下创建一个新的页面，例如 canvasDemo。

2. 在 canvasDemo 目录下创建 canvasDemo.wxml 文件，添加以下代码：

<view class="container">
 <canvas canvas-id="myCanvas" class="canvas"></canvas>
</view>

3. 在 canvasDemo 目录下创建 canvasDemo.wxss 文件，添加以下代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.canvas {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

4. 在 canvasDemo 目录下创建 canvasDemo.js 文件，添加以下代码：

Page({
  onLoad: function () {
    this.drawCanvas();
  },

  drawCanvas: function () {
    const ctx = wx.createCanvasContext('myCanvas');

    ctx.setFillStyle('red');
    ctx.fillRect(50, 50, 100, 100);

    ctx.draw();
  },
});

5. 在 app.json 文件中的 pages 数组中添加新页面的路径，例如：

{
  "pages": [
    "pages/canvasDemo/canvasDemo"
  ],
  ...
}

现在，当你运行微信小程序并导航到 canvasDemo 页面时，你应该能看到一个红色的矩形被绘制在 Canvas 上。你可以根据需要修改 drawCanvas 函数中的代码来实现更复杂的图形和动画效果。