Question

Sup人我需要在js中编写代码以在lissajous曲线中在画布中移动图像。在小帮助下，我设法编写了一个代码，这些代码在这些曲线中移动了一个小点，但实际上不知道如何用图像（任何图像）替换它。这是我的代码：

＆＃13;

function start() {
  var ctx, WIDTH, HEIGHT, x, y, dx, dy, angle, timeout;

  function init(data) {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    WIDTH = 500;
    HEIGHT = 300;
    x = WIDTH / 2;
    y = HEIGHT / 2;
    dx = x * Math.sin(0);
    dy = x * Math.sin(0);
    angle = 0;
    draw((m1 = 1), (m2 = 2), (speed = 0.009));
  }

  function line(x, y, dx, dy, r) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(dx, dy);
    ctx.lineWidth = 5; // adding here to make it more visible
    ctx.stroke();
  }
  function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
  }

  function draw() {
    timeout = setTimeout(draw, 1);
    clear();
    nx = (x - 5) * Math.sin(angle * m1);
    ny = (y - 5) * Math.sin(angle * m2);
    line(x + dx, y + dy, x + nx, y + ny);
    dx = nx;
    dy = ny;
    angle += speed;
  }
  init();
}
start();

＆＃13;

<canvas id="canvas" width="500" height="300"></canvas>

＆＃13;

真的感谢任何帮助，因为我现在卡住了。我完全是新手并且需要这个用于学校。感谢!!!

Answer 1

查看CanvasRenderingContext2D.drawImage()。

我在这里添加了一个代码示例，并对您的代码的某些部分进行了注释，以便您可以看到编辑内容：）

function start() {
  var ctx, WIDTH, HEIGHT, x, y, dx, dy, angle, phaseAngle, timeout;
  var image = document.getElementById("img");

  function init(data) {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    //WIDTH = 500;
    //HEIGHT = 300;
    WIDTH = canvas.width;
    HEIGHT = canvas.height;
    PI = 3.14159265;
    x = WIDTH / 2;
    y = HEIGHT / 2;
    angle = 0;
    phaseAngle = PI/2;
    //dx = x * Math.sin(0);
    //dy = x * Math.sin(0);
    dx = (x - 50) * Math.sin(angle);
    dy = (y - 50) * Math.sin(angle+phaseAngle);
    //angle = 0;
    draw((m1 = 1), (m2 = 2), (speed = 0.009));
  }

  function line(x, y, dx, dy, r) {
    ctx.drawImage(image, x, y);
    // ctx.beginPath();
    // ctx.moveTo(x, y);
    // ctx.lineTo(dx, dy);
    // ctx.lineWidth = 5; // adding here to make it more visible
    // ctx.stroke();
  }
  function clear() {
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
  }

  function draw() {
    timeout = setTimeout(draw, 1);
    clear();
    //nx = (x - 5) * Math.sin(angle * m1);
    //ny = (y - 5) * Math.sin(angle * m2);
    nx = (x - 50) * Math.sin(angle * m1);
    ny = (y - 50) * Math.sin(angle * m2 + phaseAngle);
    line(x + dx, y + dy, x + nx, y + ny);
    dx = nx;
    dy = ny;
    angle += speed;
  }
  init();
}
start();

<canvas id="canvas" width="500" height="300"></canvas>
<img id="img" src="https://i.stack.imgur.com/cRMrk.png" hidden> <!-- hide image, we need it only inside canvas -->

修改：更改了曲线的公式。增加的相位角使曲线以90度角运行（270度角将产生相同的曲线）。

Lissajous图，也称为BOWDITCH CURVE，由两条正弦曲线的交点产生的图案，两条正弦曲线的轴彼此成直角。请参阅：https://www.britannica.com/science/Lissajous-figure

Answer 2

您可以使用THREE.js吗？对于这种东西来说，它非常棒。从长远来看，我认为你会发现它更具可扩展性。

Here's a fiddle我为你所说的做了什么。 JsFiddle不允许跨源请求，因此我无法为您实际加载图像，只需将“path / to / image”替换为图像URL所在的位置。

function start() {
  var renderer, scene, camera, mesh;
  var width = window.innerWidth;
  var height = window.innerHeight;
  var m1 = 1;
  var m2 = 2;
  var speed = 0.009;
  var angle = 0;
  var x = width/2;
  var y = height/2;

  function init(data) {
    var canvas = document.getElementById("canvas");
    renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    scene = new THREE.Scene();
    camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
    camera.position.set(x, y, 50);

    var g = new THREE.PlaneBufferGeometry(30, 30);
    var mat = new THREE.MeshBasicMaterial({color: "pink"});
    mesh = new THREE.Mesh(g, mat)
    mesh.position.set(x, y, 0);
    scene.add(mesh);

    var loader = new THREE.TextureLoader();
    loader.load("path/to/image", function(img) {
      mat.map = img;
      mat.needsUpdate = true;
    });
  }

  function update() {
    var nx = (x - 5) * Math.sin(angle * m1);
    var ny = (y - 5) * Math.sin(angle * m2);

    mesh.position.set(x + nx, y + ny, 0);
    angle += speed;

    renderer.render(scene, camera);
    requestAnimationFrame(update);
  }

  init();
  update();
}
start();

画布中的利萨如曲线

2 个答案: