canvas绘制图片旋转
时间: 2023-08-03 19:13:16 浏览: 51
要在canvas上绘制旋转后的图片,可以使用以下步骤:
1. 创建一个Image对象并加载要绘制的图片。
2. 在canvas上创建一个2D上下文。
3. 使用上下文的`translate()`方法将绘图原点移动到图片中心。
4. 使用上下文的`rotate()`方法旋转画布。
5. 使用上下文的`drawImage()`方法绘制图片。
以下是示例代码:
```javascript
// 创建一个Image对象并加载图片
var img = new Image();
img.src = 'path/to/image.png';
// 在canvas上创建2D上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 等待图片加载完成
img.onload = function() {
// 将绘图原点移动到图片中心
ctx.translate(canvas.width/2, canvas.height/2);
// 旋转画布
ctx.rotate(Math.PI/4); // 旋转45度
// 绘制图片
ctx.drawImage(img, -img.width/2, -img.height/2);
}
```
注意,`rotate()`方法接收的参数是弧度而不是角度,所以需要将角度转换为弧度。在本例中,我们旋转了45度,所以我们将`Math.PI/4`传递给`rotate()`方法。
相关问题
canvas 保存图片旋转
你可以使用 canvas 的 toDataURL 方法将画布保存为图片,然后使用 JavaScript 中的 Image 对象进行旋转操作,最后再将旋转后的图片保存下来。具体实现可以参考以下代码:
```javascript
// 获取 canvas 元素和上下文对象
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 绘制图形
ctx.fillRect(50, 50, 100, 100);
// 将 canvas 转换为图片
const dataURL = canvas.toDataURL();
// 创建 Image 对象
const img = new Image();
// 加载图片
img.onload = function() {
// 创建临时 canvas 元素
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
// 设置临时 canvas 元素的宽高
tempCanvas.width = img.height;
tempCanvas.height = img.width;
// 旋转图片
tempCtx.translate(img.height / 2, img.width / 2);
tempCtx.rotate(Math.PI / 2);
tempCtx.drawImage(img, -img.width / 2, -img.height / 2);
// 将旋转后的图片保存为文件
const link = document.createElement('a');
link.download = 'image.png';
link.href = tempCanvas.toDataURL();
link.click();
};
// 设置 Image 对象的 src 属性
img.src = dataURL;
```
canvas 图片旋转
可以使用 Canvas API 中的 `rotate()` 方法来旋转图片。下面是一个简单的例子:
```html
<canvas id="myCanvas"></canvas>
```
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.src = "path/to/image.png";
img.onload = () => {
const x = canvas.width / 2;
const y = canvas.height / 2;
const angle = 45 * Math.PI / 180; // 旋转角度,这里是 45 度
ctx.translate(x, y);
ctx.rotate(angle);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
};
```
这段代码将在画布中心绘制一张图片,并将其旋转 45 度。可以通过调整 `angle` 变量来改变旋转角度。注意,旋转是以画布中心为基准进行的,因此需要先使用 `translate()` 方法将坐标系移动到画布中心。另外,`drawImage()` 方法的第一个参数为要绘制的图片对象,第二个和第三个参数为图片的左上角坐标,这里使用了负数来使图片居中。