uniapp canvas旋转90度
时间: 2023-08-02 11:05:45 浏览: 117
uniapp 兼容H5和小程序,实现360度旋转,3d特效源码
要将canvas旋转90度,可以使用canvas的`rotate()`方法。该方法会将canvas沿着原点顺时针旋转指定的弧度。
以下是一个示例代码:
```html
<template>
<canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas>
</template>
<script>
export default {
mounted() {
const canvas = uni.createCanvasContext('myCanvas', this)
canvas.rotate(Math.PI / 2) // 将canvas顺时针旋转90度
canvas.setFillStyle('#f00')
canvas.fillRect(10, 10, 50, 50) // 绘制一个矩形
canvas.draw()
}
}
</script>
```
在上述代码中,我们首先创建了一个canvas元素,并在mounted钩子函数中获取了该canvas的上下文对象。然后,我们使用`rotate()`方法将canvas旋转了90度,接着绘制了一个红色的矩形,并最终调用了`draw()`方法将绘制结果显示在canvas上。
阅读全文