在微信小程序中，canvas 组件用于绘制图形，实现一些图形化的效果。以下是一些基本的 canvas 组件的用法：

绘制基本图形：
<canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>

在上面的示例中，canvas-id 属性设置了 canvas 组件的唯一标识，后续在 JavaScript 中通过这个标识可以获取到 canvas 组件的绘图上下文。style 属性设置了 canvas 组件的宽度和高度。
Page({
  onReady: function () {
    const context = wx.createCanvasContext('myCanvas');

    // 绘制矩形
    context.rect(10, 10, 100, 50);
    context.setFillStyle('red');
    context.fill();

    // 绘制圆形
    context.beginPath();
    context.arc(200, 50, 30, 0, 2 * Math.PI);
    context.setFillStyle('blue');
    context.fill();

    // 绘制文本
    context.setFontSize(14);
    context.setFillStyle('black');
    context.fillText('Hello, Canvas!', 20, 100);

    context.draw();
  },
});

在上面的示例中，通过 wx.createCanvasContext 方法获取到 canvas 组件的绘图上下文，然后使用该上下文进行绘制操作。在这个例子中，绘制了一个红色的矩形、一个蓝色的圆形和一段黑色的文本。

绘制图片：
<canvas canvas-id="imageCanvas" style="width: 300px; height: 200px;"></canvas>
Page({
  onReady: function () {
    const context = wx.createCanvasContext('imageCanvas');

    // 绘制图片
    wx.getImageInfo({
      src: '/images/sample.jpg',
      success: function (res) {
        context.drawImage(res.path, 10, 10, 280, 180);
        context.draw();
      },
      fail: function (error) {
        console.error('加载图片失败', error);
      },
    });
  },
});

在上面的示例中，通过 wx.getImageInfo 方法加载图片，成功后在 canvas 上绘制这张图片。

绘制动画：
<canvas canvas-id="animationCanvas" style="width: 300px; height: 200px;"></canvas>
Page({
  onReady: function () {
    const context = wx.createCanvasContext('animationCanvas');

    let angle = 0;

    function draw() {
      context.clearRect(0, 0, 300, 200);

      context.translate(150, 100);
      context.rotate(angle);
      context.fillStyle = 'green';
      context.fillRect(-50, -50, 100, 100);

      context.draw();

      angle += Math.PI / 180;

      requestAnimationFrame(draw);
    }

    draw();
  },
});

在上面的示例中，通过不断调用 requestAnimationFrame 函数实现了一个简单的旋转矩形的动画效果。

以上是一些基本的 canvas 组件的用法示例。你可以根据实际需求，使用 canvas 组件实现更复杂的图形和动画效果。详细的 API 文档可以查阅微信小程序官方文档中的[Canvas](https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)。


转载请注明出处：http://www.zyzy.cn/article/detail/825/微信小程序