我想在canvas中围绕三角形旋转一个圆。我有之前的代码,但是现在圆在中间,一个矩形在旋转,我希望圆也能旋转并且在中间放置一个三角形。有人可以帮忙吗?
这是我目前拥有的JS代码:
这是我目前拥有的JS代码:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cx = 100;
var cy = 100;
var rectWidth = 15;
var rectHeight = 10;
var rotation = 0;
requestAnimationFrame(animate);
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(cx, cy, 10, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(rotation);
ctx.strokeRect(-rectWidth / 2 + 20, -rectHeight / 2, rectWidth, rectHeight);
ctx.restore();
rotation += Math.PI / 180;
}
<canvas id="canvas"></canvas>
translate(x, y); arc(0,0..
。因此,你可以用这两个参数做的所有事情实际上都可以通过简单的平移来完成。只有使用三角函数才能更难实现的一件事... - Kaiido