gpt4 book ai didi

javascript - 纯粹使用 JavaScript 以圆形路径移动图像

转载 作者:行者123 更新时间:2023-12-02 15:27:13 24 4
gpt4 key购买 nike

如何使 imageObject 以圆形路径移动?或者更具体地说,需要什么数学公式才能做到这一点?

我需要将 setInterval 与计算图片新坐标的函数一起使用。 setInterval 应该每秒至少调用该函数 20 次。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Graphics and animation using HTML5 Canvas</title>
<style>
#the-canvas { border: 1px dashed gray }
</style>
<script>
addEventListener('load', function() {
var x = document.getElementById("the-canvas");
var y = x.getContext("2d");

var imageObject = new Image();

imageObject.onload = function() {
y.drawImage(imageObject, 100, 200);
};

imageObject.src = "image.jpg";

});
</script>
</head>
<body>
<canvas id="the-canvas" width="500" height="400">
Your browser does not support the &lt;canvas&gt; element.
</canvas>
</body>
</html>

最佳答案

所需的数学公式在一维为余弦,另一维为正弦

类似这样的事情:

        addEventListener('load', function() {
var x = document.getElementById("the-canvas");
var y = x.getContext("2d");

var imageObject = new Image();

var step = 0, radius = 50, speed = 0.05;

function spin() {
y.clearRect(0, 0, x.width, x.height);
y.drawImage(imageObject, 100 + radius * Math.cos(speed * step), 200 + radius * Math.sin(speed * step));
++step;
}

imageObject.onload = function() {
y.drawImage(imageObject, 100, 200);
setInterval(spin, 50); // 20 fps
};

imageObject.src = "image.jpg";

});

关于javascript - 纯粹使用 JavaScript 以圆形路径移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33595359/

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