canvas在舞台上点击后图片旋转_Canvas实现图片360度旋转
时间: 2023-11-22 18:52:44 浏览: 34
要实现图片的360度旋转,可以使用canvas的transform方法和事件监听器来实现。具体步骤如下:
1. 创建一个canvas元素和一个图片元素,并将图片元素加载到canvas中。
2. 在canvas上绘制图片,并设置图片的初始位置和旋转角度。
3. 监听鼠标点击事件,并根据鼠标点击位置和图片中心点的距离计算出图片需要旋转的角度。
4. 使用canvas的transform方法来旋转图片,并在canvas上重新绘制旋转后的图片。
下面是一个示例代码,可以实现图片在舞台上点击后旋转360度:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas图片旋转</title>
<style>
canvas {
border: 1px solid #ccc;
margin: 20px auto;
display: block;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 获取canvas元素和图片元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'image.jpg';
// 图片加载完成后进行绘制
img.onload = function() {
// 设置图片初始位置和旋转角度
var x = canvas.width / 2;
var y = canvas.height / 2;
var angle = 0;
// 绘制图片
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
ctx.restore();
// 监听canvas的点击事件
canvas.addEventListener('click', function(event) {
// 计算鼠标点击位置和图片中心点的距离
var mouseX = event.clientX - canvas.offsetLeft;
var mouseY = event.clientY - canvas.offsetTop;
var dx = mouseX - x;
var dy = mouseY - y;
// 计算图片需要旋转的角度
angle = Math.atan2(dy, dx) * 180 / Math.PI;
angle += 90;
// 绘制旋转后的图片
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
ctx.restore();
});
};
</script>
</body>
</html>
```
在这段代码中,我们监听了canvas的点击事件,并在事件处理函数中计算了鼠标点击位置和图片中心点的距离,然后根据这个距离计算出图片需要旋转的角度。最后使用canvas的transform方法来旋转图片,并在canvas上重新绘制旋转后的图片。