円の方向に画像を移動する

画像を円の方向に移動したいと思います。 setTimeout機能を使用しましたが、機能しませんでした。円の方向に画像を移動する

私のコードは次のとおりです。（！今、要求されたが、私の強大な描画スキルを見よ、画像に変更される）キャンバス上で参考に

x = image_size/2+radius*Math.cos(Math.PI*angle)-ball_image_size/2; 
y = image_size/2-radius*Math.sin(Math.PI*angle)-ball_image_size/2; 

//-----image main circle-------- 

base_image = new Image(); 
base_image.src = 'img/test.jpg'; 
base_image.onload = function() 
{ 
    ctx.drawImage(base_image,0,0,image_size,image_size); 
}; 

//------------image ball--------- 

ball_image = new Image(); 
ball_image.src = 'img/ball.jpg'; 
ball_image.onload = function() 
{ 
    ctx.drawImage(ball_image, x, y, ball_image_size, ball_image_size); 
} 

clr = setTimeout('ball()',20); 

} 

//--------function of animation------------ 
function ball() { 

    ball_image.style.left = Math.cos(Math.PI*angle)*radius; 
    ball_image.style.top = Math.sin(Math.PI*angle)*radius; 

    angle = angle + .1; 
    //setTimeout(ball,20); 
}

出典

2016-10-08 jasminavas

'angle'がどこかに定義されていますか？ – Tyr

イメージ要素のスタイルを設定していて、キャンバスが変更されることを期待しています。また、読み込み時に2つの画像を非同期に描画していますが、これは実行可能ですが、それが何をしているのか完全に理解していることは間違いありません。 – ASDFGerte

3はい.........角度が0または.5など... – jasminavas

は、回転する星のこのバージョンを参照してください。また、更新ではキャンバスの描画呼び出し（）を使用し、キャンバスが気にしないスタイルを画像要素に設定しないように注意してください。最適には、何かを始める前にあなたのイメージをロードするべきです。

let canvas = document.getElementById("canvas"); 
 
let ctx = canvas.getContext("2d"); 
 
let radius = canvas.width/3; 
 
let centerX = canvas.width/2; 
 
let centerY = canvas.height; 
 
let x, y; 
 
let angle = 0; 
 

 
let star = new Image(); 
 
star.onload = draw; 
 
//Imgur doesn't produce CORS issues luckily 
 
star.src = "http://i.imgur.com/VIofbab.png"; 
 

 
function draw() { 
 
    //minus because it should start on the left 
 
    x = centerX - Math.cos(angle) * radius; 
 
    //minus because canvas y-coord system is from 
 
    //top to bottom 
 
    y = centerY - Math.sin(angle) * radius; 
 

 
    //Angle is in rad 
 
    angle += Math.PI/180; 
 
    angle %= Math.PI; 
 
    
 
    //Draw a star (was circle before) 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.drawImage(star, x - star.width/2, y - star.height/2); 
 
    setTimeout(draw, 50); 
 
};

<html> 
 
    <body> 
 
    <canvas id="canvas" width="320" height="180" style="border:1px solid #000000;">not supported</canvas> 
 
    </body> 
 
</html>

出典

2016-10-08 15:46:55 ASDFGerte

あなたの貴重な返信ありがとうございました........ – jasminavas

しかし、私の問題は......私はイメージボールに使われていました...その必然です...私のプログラムは物理学の振動と関連しています.....だから私は、ユーザーが選択した角度で円に沿ってボールを回転させる必要があります – jasminavas

キャンバス上の画像を回転させる機会はありますか？ – jasminavas

円の方向に画像を移動する

答えて

関連する問題