问题

Question

我想制作一个框作为正弦图移动。在我现在的地步，我根本无法将盒子代表到画布中。一开始我能够，但在完成三角测量部分后，盒子消失了，没有错误......

<!DOCTYPE html>
<html>
 <head>
 </head>
 <body>
    <canvas id="canvas" width="600" height="300" style="background-color:red"></canvas>
    <script type="text/javascript">
        var canvas = document.querySelector("canvas");//isoute me document.getElementsByTagName() 
        var ctx = canvas.getContext("2d");
        var can_width = canvas.width;
        var can_height = canvas.height;
        var x,y;

        function PVector(x_,y_){
            var y = [];
            var x = [0, Math.PI/6, Math.PI/4, Math.PI/3, Math.PI/2, 2/3*Math.PI, 3/4*Math.PI, 
                        5/6*Math.PI, Math.PI, 7/6*Math.PI, 5/4*Math.PI, 4/3*Math.PI, 3/2*Math.PI,
                        5/3*Math.PI, 7/4*Math.PI, 11/6*Math.PI, 2*Math.PI];

            for (var i=0, len=x["length"]; i<len; i++){
                var A;
                A = Math.sin(x[i]);
                y.push(A);

            }console.log(y);console.log(x);
                return{
                    x:x,
                    y:y
                };
        }
        var Point = {
            location : {x:0, y: can_height/2},//initial location
            velocity : new PVector(x,y),
            display : ctx.fillRect(can_width/2,can_height/2 , 25, 25),//initial position of the box
            step : function(){ 
                    this.location.x += this.velocity.x;
                    this.location.y += this.velocity.y;

                },
            display : function(){
                        ctx.fillRect(this.location.x, this.location.y, 25, 25);
                    }   
        };              
        function update(){
            Point["step"]();
            ctx.clearRect(0,0, can_width, can_height);
            Point["display"]();
            window.setTimeout(update, 1000/30);
        }               
        function init(){
            update();
        }
        init();             

    </script>
</body>

Answer 1

问题

在PVector对象中，Array和x返回y，而在{{1>}中使用{em>值 1}}方法。这将导致整个数组被添加为字符串。

解决方案

你需要一些遍历那个数组的东西。这是一个例子，它可能不是您之后的结果，但它显示了您需要应用的原则：

step()

<强> Updated fiddle

提示：我会像罗宾一样回答，建议简化鼻窦计算。当需要性能并且浏览器无法跟上时（即数千个对象），Sinus表是好的，但在更简单的情况下，直接计算也会起作用。

Answer 2

如果你的目标只是让一个盒子在正弦曲线图中移动，那么它可以更简单。

This jsfiddle 显示了一个在正弦图中移动的框的稍微简单的示例，其中我刚删除了部分代码并使用Math.sin计算路径并使用时间而不是预先计算的x的值。

function update(){
    time += 0.1;
    ctx.clearRect(0,0, can_width, can_height);
    x = time;
    y = (can_height/2)+(can_height/2)*Math.sin(time);
    console.log(x, y);
    ctx.fillRect(x*16, y, 25, 25);
    window.setTimeout(update, 1000/30);
}

修改变量以使其在画布上看起来不错。您可以编辑时间的加法，以及y的高度和基线，以满足您的需求。

如果您需要遵循代码中的规范，请查看Ken的答案。

Answer 3

因为你想要一个正弦移动，所以使用... sin函数是有意义的。

正弦移动的公式是：

y = maxValue * sin ( 2 * PI * frequency * time ) ;

其中频率为赫兹（==＆＃39;每秒次数＆＃39;），时间为秒。

您很可能会使用Date.now()，因此您需要转换时间，以毫秒为单位。由于PI的值在不久的将来不会改变，您可以计算一次幻数

k = 2 * PI / 1000 = 0.006283185307179587

，公式变为：

 y = sin( k * frequency * Date.now() );

以下是关于如何使用公式的简单示例：

＆＃13;

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var can_width = canvas.width;
var can_height = canvas.height;


// magic number
var k = 0.006283185307179587;
// oscillations per second
var frequency = 1/5;
// ...
var amplitude = can_width / 8; 


function animate() {
   ctx.clearRect(0,0,can_width, can_height);
   ctx.fillStyle= '#000';
   var y = amplitude * Math.sin ( k * frequency * Date.now() );
   ctx.fillRect(can_width/2, can_height/2 + y, 20, 20 );
}

setInterval(animate, 30);

＆＃13;

<canvas id="canvas" width="400" height="200" style="background-color:red"></canvas>

＆＃13;

Javascript：无法表示正弦图

3 个答案:

问题

解决方案