円周上を移動する点eの求め方
[上に]
[前に]
[次に]
りうきん
[E-Mail]
2000/01/04(火) 18:33:28
JavaScriptでマウスカーソルの周りを時計方向に周回する画像をつくろうと思ったのですが、高校卒業後、ん年も経っているため、
肝心の円周上を移動する点座標を求める数式をすっかり忘れてしまいました。
直接web製作には関係ないのですが、よろしければ教えてください。
(以下の仮定にそって説明してくださると幸いです。)
中心座標 x,y
半径 100
Aurai
[E-Mail]
2000/01/05(水) 02:19:55
<form name="circlepoint">
<br><textarea name="point" rows=20 cols=10>x,y
</textarea>
<script>
for(i=Math.PI*2;i>0;i-=Math.PI/8){
document.circlepoint.point.value =
document.circlepoint.point.value +
parseInt(100*Math.cos(i)) +
',' +
parseInt(100*Math.sin(i))+
unescape('%0D%0A');
}
</script>
</form>
こんな感じでわかりますかね
何気に受験生な私（笑）
りうき
2000/01/05(水) 03:05:47
[[解決]]
そんな感じでわかりました。
ありがとうございました。
受験、気軽にやれば成功しますよ。
合格お祈りしています。
では。
gourd
2000/01/05(水) 05:11:53
おはようございます。解決しちゃいましたね。
やはり、寝る前に送るべきでしたか。
前に、レイヤー利用で作ったのがありまして、
IEでは相変わらず使えないので
実用的ではありませんが、こんなのです。
<html>
<head>
<title>回転</title>
<script language="JavaScript">
<!--
pai=3.1416*2; //円周率*2
roa=55; //動画自体の半径
a=150; b=150; //中心位置の指定
a=a-roa;b=b-roa; //動画の大きさを考慮して中心位置を補正
r=100; //動半径
dnm=90; //360°を何分割して動画を動かすか
nms=5; //周回数
dr=-1; //1：時計回り -1：反時計回り
speed=100; //次の位置への動速度
dr=dr*pai/dnm;
x_axs=new Array(dnm);
y_axs=new Array(dnm);
for(i=0;i<dnm*nms;i++){
x_axs[i]= a+r*Math.cos(i*dr); //動画位置の指定 x=横位置
y_axs[i]= b+r*Math.sin(i*dr); // y=縦位置
}
function rotat(){
document.layers["Maru"].moveTo(x_axs[i],y_axs[i]);
for(j=0;j<speed;j++){}
}
// -->
</script>
</head>
<body bgcolor="white" onload="for(i=1;i<dnm*nms;i++){rotat(i);}">
<layer top="95" left="195" clip="110,110" background="test2.gif" id="Maru">
<!-- topはb-roa, leftはa-roa+r, clipはroa*2を記入すること。-->
</layer>
</body>
</html>
x_axsとy_axsのところをそのまま使うとAuraiさんのと同じですね。
りうきん
2000/01/05(水) 18:27:08
こんばんは。
このソースも参考にさせてもらいます。
わざわざありがとうございました。
追伸
こんな風に<div>にIDとabsoluteをつけると、IEではスタイルシートを使って、
NNではレイヤーとして制御できます。
<div style="position:absolute" id="Maru">●</div>
スクリプト例
if(document.all)
{
document.all.Maru.style.posLeft=x_axs[i];
document.all.Maru.style.posTop=y_axs[i];
}
else document.layers["Maru"].moveTo(x_axs[i],y_axs[i]);
[上に]
[前に]
[次に]