微信小程序画布 - 程序员自由职业

在微信小程序中，画布（Canvas）是用于绘制图形的元素，通过 Canvas API 可以实现各种图形和图像的绘制。以下是一些常见的 Canvas 操作：

创建 Canvas

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

获取 Canvas 上下文

const ctx = wx.createCanvasContext('myCanvas');

绘制图形

1. 绘制矩形

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50); // x, y, width, height

2. 绘制圆形

ctx.beginPath();
ctx.arc(100, 100, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();

3. 绘制线条

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 100);
ctx.lineWidth = 2;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.closePath();

4. 绘制文字

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 50, 150);

清除画布

ctx.clearRect(0, 0, canvas.width, canvas.height);

绘制图片

wx.getImageInfo({
  src: 'path/to/image.jpg',
  success(res) {
    ctx.drawImage(res.path, 50, 50, 100, 100);
    ctx.draw();
  }
});

Canvas 事件

canvas.addEventListener('touchstart', function (e) {
  const x = e.touches[0].x;
  const y = e.touches[0].y;
  console.log('Touchstart at', x, y);
});

保存 Canvas 图片到本地

wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success(res) {
    console.log(res.tempFilePath);
  }
});

以上是一些基本的 Canvas 操作示例。在实际应用中，可以根据具体需求使用 Canvas API 进行更复杂的绘制和交互。详细的 Canvas API 使用说明可以查阅[微信小程序官方文档中的 Canvas 部分](https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)。

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