Javascript 像钟摆一样移动画布图像_Javascript_Html5 Canvas_2d Games

Javascript 像钟摆一样移动画布图像

javascript html5-canvas

Javascript 像钟摆一样移动画布图像,javascript,html5-canvas,2d-games,Javascript,Html5 Canvas,2d Games,我正在构建html5游戏，就像城市集团一样，我想像钟摆一样移动rob图片 drwing函数 function draw(){ ctx.save(); ctx.translate(20,0); ctx.translate(box1.width/2,0); ctx.rotate(val*(Math.PI/180)); ctx.drawImage(box1,box1.X,box1.Y); ctx.restore(); } 现在我已经准备好了旋转方法我试着按我说的移动它 function box

我正在构建html5游戏，就像城市集团一样，我想像钟摆一样移动rob图片

drwing函数

function draw(){
ctx.save();
ctx.translate(20,0);
ctx.translate(box1.width/2,0);
ctx.rotate(val*(Math.PI/180));
ctx.drawImage(box1,box1.X,box1.Y);
ctx.restore();


}

现在我已经准备好了旋转方法我试着按我说的移动它

function boxPendolAnim(){

loop1 = setInterval(function(){
val =  val -0.1;

},200);

setInterval(function(){
if (val <=-2) {
clearInterval(loop1);
setInterval(function(){
val = val +0.1;
},200);

}; 

},200);

}

函数boxPendolAnim（）{
loop1=setInterval（函数（）{
val=val-0.1；
},200);
setInterval（函数（）{
如果（val在代码中：

只需使用1个设置间隔
在setInterval执行的函数中，增加角度，直到达到所需的最大值，然后减小角度

这是摆锤运动中的图像示例：

下面是代码和小提琴：

$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var rotation=0；//从水平方向开始
var direction=Math.PI/60；//每个循环改变3度
var box1=新图像（）；
box1.onload=函数（）{
设定间隔（go，40）；
}
框1.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
函数go（）{
//设置新的旋转
旋转+=方向；
如果（旋转>Math.PI | | |旋转如果我希望速度在顶部点达到0，在水平点达到最大速度，我该怎么办？当角度为PI/2时，钟摆在底部。因此，当角度从任意一侧接近PI/2时，你会加快旋转的变化。一种方法是添加一个缓和变量，如下所示：旋转+=方向*ea唱歌。放松变量在角度0&PI处最慢（可能放松=1.00）。放松变量在角度PI/2处最快（可能放松=3.00）。例如，你可以这样计算放松：1+2.00*Math.abs（（PI/2）-方向）/（PI/2）哎呀！我有一个“数学时刻”在我上面的评论中。例如，您可以这样计算：5-4.00*Math.abs（（Math.PI/2）-旋转）/（Math.PI/2）；
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>

<style>
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");


        var rotation=0;             // start at horizontal
        var direction=Math.PI/60;   // 3 degrees change each loop


        var box1=new Image();
        box1.onload=function(){
            setInterval(go,40);
        }
        box1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";


        function go(){

            // set the new rotation
            rotation+=direction;
            if(rotation>Math.PI || rotation<0){
                direction=-direction;
                rotation+=direction;
            }

            ctx.clearRect(0,0,canvas.width,canvas.height);

            draw();

        }


        function draw(){
            ctx.save();
            ctx.translate(120,40);
            ctx.rotate(rotation);
            ctx.beginPath();
            ctx.moveTo(0,0);
            ctx.lineTo(40,0);
            ctx.rect(40,-15,30,30);
            ctx.stroke();
            ctx.drawImage(box1,0,0,box1.width,box1.height,40,-15,30,30);
            ctx.restore();
        }


    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>