小程序 canvas 画图
时间: 2023-09-30 17:12:12 浏览: 56
小程序的 Canvas 组件提供了一种在页面中进行绘图的方式。你可以使用 Canvas 组件绘制各种形状、绘制文字、图片等。下面是一个简单的 Canvas 画图示例。
1. 在 WXML 文件中添加 Canvas 组件:
```html
<canvas canvas-id="myCanvas"></canvas>
```
2. 在 JS 文件中获取 Canvas 组件的上下文:
```javascript
const context = wx.createCanvasContext('myCanvas');
```
3. 绘制各种形状:
```javascript
// 绘制矩形
context.rect(10, 10, 100, 50);
context.setFillStyle('red');
context.fill();
// 绘制圆形
context.beginPath();
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.setFillStyle('green');
context.fill();
// 绘制线条
context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 50);
context.setStrokeStyle('blue');
context.stroke();
```
4. 绘制文字:
```javascript
context.setFontSize(20);
context.setFillStyle('black');
context.fillText('Hello World', 50, 150);
```
5. 绘制图片:
```javascript
wx.getImageInfo({
src: 'https://example.com/image.jpg',
success(res) {
context.drawImage(res.path, 50, 200, 100, 100);
context.draw();
}
});
```
6. 最后,调用 `context.draw()` 方法将绘制的内容显示在 Canvas 组件上。
以上就是一个简单的 Canvas 画图示例。你可以根据自己的需要,使用 Canvas 组件绘制更复杂的图形。