Почему, когда я копирую кодовое слово javascript в слово и инкапсулирую его в свой собственный html (который точен, за исключением того, что содержит теги propper), он не будет - PullRequest
Новая
       0

Почему, когда я копирую кодовое слово javascript в слово и инкапсулирую его в свой собственный html (который точен, за исключением того, что содержит теги propper), он не будет

0 голосов
/ 28 сентября 2018

src: http://thecodeplayer.com/walkthrough/3d-perspective-projection-canvas-javascript

приведенный ниже код является кодом, который я скопировал и поместил в теги пропппера.некоторые CSS отсутствует в источнике, который я не знаю, как добавить.Есть ли чрезмерная информация в моем HTML?

var canvas = document.createElement("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
var fov = 250;
var context = canvas.getContext("2d");
document.body.appendChild(canvas);
var pixels = [];
for (var x = -250; x < 250; x += 5)
    for (var z = -250; z < 250; z += 5)
        pixels.push({
            x: x,
            y: 40,
            z: z
        });

function render() {
    ctx.clearRect(0, 0, w, h);
    var imagedata = ctx.getImageData(0, 0, w, h);
    var i = pixels.length;
    while (i--) {
        var pixel = pixels[i];
        var scale = fov / (fov + pixel.z);
        var x2d = pixel.x * scale + w / 2;
        var y2d = pixel.y * scale + h / 2;
        if (x2d >= 0 && x2d <= w && y2d >= 0 && y2d <= h) {
            var c = (Math.round(y2d) * imagedata.width + Math.round(x2d)) * 4;
            imagedata.data[c] = 0; //red
            imagedata.data[c + 1] = 255; //green
            imagedata.data[c + 2] = 60; //blue
            imagedata.data[c + 3] = 255; //alpha
        }
        pixel.z -= 1;
        if (pixel.z < -fov) pixel.z += 2 * fov;
    }
    ctx.putImageData(imagedata, 0, 0);
}
setInterval(render, 1000 / 30);
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>exe</title>
    <style> html, body { margin:0;padding:0;overflow: hidden; } 
</style>
</head>

<body>
</body>

</html>

1 Ответ

0 голосов
/ 28 сентября 2018

Я сделал несколько изменений, и теперь это работает (вроде).Переменные w и h не были объявлены.Также в двойном цикле для x и z отсутствовали фигурные скобки, а контекст был переименован в ctx. 

var canvas = document.createElement("canvas");
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var fov = 250;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

var pixels = [];

for (var x = -250; x < 250; x += 5) {
  for (var z = -250; z < 250; z += 5) {
    pixels.push({
      x: x,
      y: 40,
      z: z
    });
  }
}

function render() {
  ctx.clearRect(0, 0, w, h);
  var imagedata = ctx.getImageData(0, 0, w, h);
  var i = pixels.length;

  while (i--) {
    var pixel = pixels[i];
    var scale = fov / (fov + pixel.z);
    var x2d = pixel.x * scale + w / 2;
    var y2d = pixel.y * scale + h / 2;

    if (x2d >= 0 && x2d <= w && y2d >= 0 && y2d <= h) {
      var c = (Math.round(y2d) * imagedata.width + Math.round(x2d)) * 4;
      imagedata.data[c] = 0; //red
      imagedata.data[c + 1] = 255; //green
      imagedata.data[c + 2] = 60; //blue
      imagedata.data[c + 3] = 255; //alpha
    }
    pixel.z -= 1;
    if (pixel.z < -fov) pixel.z += 2 * fov;
  } //while



  ctx.putImageData(imagedata, 0, 0);
}


setInterval(render, 1000 / 30);
canvas {
  background-color: black;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...