绕圆旋转三角形(2D)
Rotate triangle around circle (2D)
我正在尝试围绕一个圆旋转一个三角形,三角形应该始终朝外,这意味着它应该围绕圆旋转,我猜是围绕它的中心旋转。
我发现 问题,这正是我需要的,但恰恰相反。
我需要的另一件事是让三角形指向用户的鼠标坐标。又名三角形有点像箭头。
我刚刚编辑了您链接的代码,并将矩形替换为三角形,并且 animate()
使用了鼠标移动侦听器,当然:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 100;
var cy = 100;
var radious = 10;
var gap = 5;
var triangleHeight = 25;
var triangleBase = 10;
redraw(cx + 1, cy);
function redraw(mx, my)
{
mox = mx-cx;
moy = my-cy;
rotation = Math.atan2(moy, mox);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(cx, cy, radious, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(rotation);
ctx.beginPath();
ctx.moveTo(radious+gap, -triangleBase/2);
ctx.lineTo(radious+gap, triangleBase/2);
ctx.lineTo(radious+gap+triangleHeight, 0);
ctx.lineTo(radious+gap, -triangleBase/2)
ctx.stroke();
ctx.restore();
}
canvas.addEventListener("mousemove", function (e) {
redraw(e.pageX, e.pageY);
}, false);
<canvas id="canvas"></canvas>
顺便说一句,这是我在 JS 中的第一段代码,所以,如果有什么有趣的地方,请随时纠正我的代码。
我正在尝试围绕一个圆旋转一个三角形,三角形应该始终朝外,这意味着它应该围绕圆旋转,我猜是围绕它的中心旋转。
我发现
我刚刚编辑了您链接的代码,并将矩形替换为三角形,并且 animate()
使用了鼠标移动侦听器,当然:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 100;
var cy = 100;
var radious = 10;
var gap = 5;
var triangleHeight = 25;
var triangleBase = 10;
redraw(cx + 1, cy);
function redraw(mx, my)
{
mox = mx-cx;
moy = my-cy;
rotation = Math.atan2(moy, mox);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(cx, cy, radious, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(rotation);
ctx.beginPath();
ctx.moveTo(radious+gap, -triangleBase/2);
ctx.lineTo(radious+gap, triangleBase/2);
ctx.lineTo(radious+gap+triangleHeight, 0);
ctx.lineTo(radious+gap, -triangleBase/2)
ctx.stroke();
ctx.restore();
}
canvas.addEventListener("mousemove", function (e) {
redraw(e.pageX, e.pageY);
}, false);
<canvas id="canvas"></canvas>
顺便说一句,这是我在 JS 中的第一段代码,所以,如果有什么有趣的地方,请随时纠正我的代码。