gpt4 book ai didi

javascript - 如果 Canvas 上已经绘制了一些东西,如何通过跟随鼠标旋转 Canvas

转载 作者:行者123 更新时间:2023-11-30 14:55:56 25 4
gpt4 key购买 nike

我目前有一个 Canvas ,上面绘制了一个元素,我使用自定义函数和 onload 函数绘制我想知道如何通过像转动轮子一样跟随鼠标 360 度来旋转 Canvas .代码如下

<!DOCTYPE html>
<html>

<head>
<title>Help</title>
</head>
<body>

<canvas id="MyCanvas" width="500" height="500"></canvas>
<script>
var ctx = document.getElementById("MyCanvas").getContext("2d");
ctx.translate(250,250);
function draw(){
ctx.arc(0,0,100,0,Math.PI*2,false); // x, y, radius, start angle, end angle, false/true
ctx.stroke();
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.moveTo(100,0);
ctx.lineTo(60,-80);
ctx.moveTo(60,-80);
ctx.lineTo(-100,0);
ctx.stroke();
}
window.onload=draw;
</script>

</body>
</html>

有谁知道这怎么可能 我已经尝试了多种不同的功能。然而,他们似乎无能为力。帮助将不胜感激。

已编辑但有小问题

<!DOCTYPE html>
<html>

<head>
<title>Help</title>
</head>

<style>
canvas{
border: 2px solid black;
}
</style>

<body>

<canvas id="Canvas" height="300"></canvas>

<script>
const ctx = canvas.getContext("2d");

const mouse = { x: 0, y: 0 };
function mouseEvents(e) {
const bounds = canvas.getBoundingClientRect();
mouse.x = e.pageX - bounds.left - scrollX;
mouse.y = e.pageY - bounds.top - scrollY;
}
document.addEventListener("mousemove", mouseEvents);


function drawRotated(x, y, angle) {
ctx.setTransform(1, 0, 0, 1, x, y);
ctx.rotate(angle);
ctx.beginPath();
ctx.arc(0, 0, 100, 0, Math.PI * 2);
ctx.moveTo(-100, 0);
ctx.lineTo(100, 0);
ctx.lineTo(60, -80);
ctx.closePath();
ctx.stroke();
}


function update(timer) {
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
ctx.clearRect(0, 0, 300, 300);


var angle = Math.atan2(mouse.y - 150, mouse.x - 150);


drawRotated(150, 150, angle);
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>

</body>
</html>

最佳答案

您需要创建一个鼠标移动监听器和一个动画循环。

在动画循环中获取鼠标位置并使用 Math.atan2( 获取从中心 Canvas 到鼠标的方向。

然后使用 ctx.setTransform 设置变换以缩放和定位设计旋转中心,然后使用 ctx.rotate 旋转变换以指向计算出的 Angular 。

查看代码片段了解更多详情

const ctx = canvas.getContext("2d");
// create mouse event listener
const mouse = { x: 0, y: 0 };
function mouseEvents(e) {
const bounds = canvas.getBoundingClientRect();
mouse.x = e.pageX - bounds.left - scrollX;
mouse.y = e.pageY - bounds.top - scrollY;
}
document.addEventListener("mousemove", mouseEvents);

// draw design at x,y and rotated by angle
function drawRotated(x, y, angle) {
ctx.setTransform(1, 0, 0, 1, x, y);
ctx.rotate(angle);
ctx.beginPath();
ctx.arc(0, 0, 100, 0, Math.PI * 2);
ctx.moveTo(-100, 0);
ctx.lineTo(100, 0);
ctx.lineTo(60, -80);
ctx.closePath();
ctx.stroke();
}

// render loop called 60 times a second
function update(timer) {
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset transform
ctx.clearRect(0, 0, 300, 300);

// get angle from center to mouse
var angle = Math.atan2(mouse.y - 150, mouse.x - 150);

// draw rotated design
drawRotated(150, 150, angle);
requestAnimationFrame(update);
}
requestAnimationFrame(update);
canvas {
border: 2px solid black;
}
<canvas id="canvas" height=300></canvas>

关于javascript - 如果 Canvas 上已经绘制了一些东西,如何通过跟随鼠标旋转 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47278740/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com