1

したがって、私のキャンバスには大きな楕円があり、ユーザーがキャンバスをクリックすると、大きな楕円の端に小さな楕円がクリックされた方向に作成されます。角度がずれており、計算にあまり自信がありません。また、この座標系が下降するとyが増加するという事実は、それを台無しにしていると思います。誰でも望ましい結果を得るのを手伝ってもらえますか?

HTML

<html>
<head>
    <script src='processing-1.4.1.min.js'></script>
    <script src='jquery-1.9.1.min.js'></script>
</head>

<body>
    <canvas id="gamecanvas" data-processing-sources="canvas.pde"></canvas>
</body>

<script>
var gamecanvas = document.getElementById("gamecanvas");
var projectiles = [];

$("#gamecanvas").click(function(e) {
    var x = e.clientX - gamecanvas.offsetLeft;
    var y = e.clientY - gamecanvas.offsetTop;
    var pindex = projectiles.length;
    projectiles[pindex] = [];
    projectiles[pindex]['angle'] = Math.atan2(y - 200, x - 300) * 180 / Math.PI;
    projectiles[pindex]['x'] = 300 + 10 * Math.cos(projectiles[pindex]['angle']);
    projectiles[pindex]['y'] = 200 + 10 * Math.sin(projectiles[pindex]['angle']);
});
</script>
</html>

Processing.js Canvas Sketch (リファレンス)

void draw() {
    size(600,400);
    background(255,255,255);
    fill(#FF0000);
    ellipse(300,200,15,15);
    for(i = 0;i < projectiles.length;i++) {
        ellipse(projectiles[i]['x'],projectiles[i]['y'],2,2);
    }
}
4

1 に答える 1