Question

我对代码了解甚少，但是无论如何，我一直希望John Healey能够“分叉” this creation。它是用JavaScript编写的，但我希望将其合并到html中，以便可以在浏览器中轻松打开它。

一旦我找到了html的必要标签，就尝试将上面的代码放在标头和正文之间（在不同的时间），但是似乎都不起作用。我尝试关闭图像（无论如何我打算以后再做），以防出现问题，但这也无法解决。我想知道这是否是处理能力的问题，因为我使用的是运行Windows 10旧版本的低劣Acer 2合1电脑，因此，我想出了这一点（对不起，将整个东西放在这里）：

<html>
<head>
<script type="application/javascript">
var doc = document,
    win = window,
    body = doc.body;

var ww = win.innerWidth,
    wh = win.innerHeight;

var c = doc.createElement('canvas'),
    ctx = c.getContext('2d');

var half_PI = Math.PI / 2,
    two_PI = Math.PI * 2,
    ease = 0.01;


var k = {
    offsetRotation: 0,
    offsetScale: .8,
    offsetX: 0,
    offsetY: 0,
    radius: 1100,
    slices: 16,
    zoom: 1.5
};

body.appendChild(c);
c.width = k.radius * 2;
c.height = k.radius * 2;

var img = new Image();
img.src = 'https://images.unsplash.com/photo-1504532472068-9ae844337da7?ixlib=rb0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e76ebffebd8e3c65985875554e36f35&auto=format&fit=crop&w=1334&q=80'; 
var fill = ctx.createPattern(img, 'repeat'); 

var scale, step, cx;

scale = k.zoom * (k.radius / Math.min(img.width, img.height));
step = two_PI / k.slices;
cx = img.width / 2;

function draw(){

    ctx.fillStyle = fill;

    for (var i = 0; i <= k.slices; i++) {
        ctx.save();
        ctx.translate(k.radius, k.radius);
        ctx.rotate(i * step);
        ctx.beginPath();
        ctx.moveTo(-0.5, -0.5);
        ctx.arc(0, 0, k.radius, step * -0.51, step * 0.51);
        ctx.rotate(half_PI);
        ctx.scale(scale, scale);
        ctx.scale([ -1,1 ][i % 2], 1);
        ctx.translate(k.offsetX - cx, k.offsetY);
        ctx.rotate(k.offsetRotation);
        ctx.scale(k.offsetScale, k.offsetScale); 
        ctx.fill();

        ctx.restore();

    }

} 


var tx = k.offsetX;
var ty = k.offsetY;
var tr = k.offsetRotation;


win.addEventListener('mousemove', mousemove, false);
function mousemove(e){
    var cx, cy, dx, dy, hx, hy;
    cx = ww / 2;
    cy = wh / 2;
    dx = e.pageX / ww;
    dy = e.pageY / wh;
    hx = dx - 0.1;
    hy = dy - 0.1;
    tx = hx * k.radius * -.8;
    ty = hy * k.radius * .8;
}

c.style.position = 'fixed';
c.style.marginLeft = -k.radius + 'px';
c.style.marginTop = -k.radius + 'px'; 
c.style.left = '50%';
c.style.top = '50%';

function update() {
    tr -= 0.002; 

    k.offsetX += (tx - k.offsetX) * ease;
    k.offsetY += (ty - k.offsetY) * ease;
    k.offsetRotation += (tr - k.offsetRotation) * ease; 

    draw(); 

    requestAnimationFrame(update);
};
update();
</script>
</head>
<body>
</body>
</html>

我希望的是一种可以在浏览器中打开的交互式万花筒，但我得到的只是一个空白的Chrome标签。我认为自己已经尽了最大的努力，对此提供了任何帮助。

Answer 1

问题是您正在createPattern上调用<img>，直到它完成了图像加载。执行此操作时，createPattern返回null。如此例所示，您必须等到触发图像的onload事件以调用createPattern。

<html>

<head>
  <script type="application/javascript">
    var doc = document,
      win = window,
      body = doc.body;

    var ww = win.innerWidth,
      wh = win.innerHeight;

    var c = doc.createElement('canvas'),
      ctx = c.getContext('2d');

    var half_PI = Math.PI / 2,
      two_PI = Math.PI * 2,
      ease = 0.01;


    var k = {
      offsetRotation: 0,
      offsetScale: .8,
      offsetX: 0,
      offsetY: 0,
      radius: 1100,
      slices: 16,
      zoom: 1.5
    };

    body.appendChild(c);
    c.width = k.radius * 2;
    c.height = k.radius * 2;

    var img = new Image();
    img.src = 'https://images.unsplash.com/photo-1504532472068-9ae844337da7?ixlib=rb0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e76ebffebd8e3c65985875554e36f35&auto=format&fit=crop&w=1334&q=80';
    var fill1 = ctx.createPattern(img, 'repeat');
    console.log("fill1", fill1);
    img.onload = () => {
      var fill2 = ctx.createPattern(img, 'repeat');
      console.log("fill2", fill2);
    }
    
    // ... code afterwards omitted for brevity
  </script>
</head>

<body>
</body>

</html>

Answer 2

我在您的代码中发现的问题是，您在html的body标签之前编写了脚本，但找不到它。我对您的代码进行了一些更改，您可以看看here

Answer 3

您的代码中存在一些问题，几乎与图像的意外加载和变量范围有关。

看看admob guidance。

<html>
  <head> </head>
  <body>
    <script type="application/javascript">
      var doc = document,
        win = window;

      var body = doc.body;

      var ww = win.innerWidth,
        wh = win.innerHeight;

      var c = doc.createElement("canvas"),
        ctx = c.getContext("2d");

      var half_PI = Math.PI / 2,
        two_PI = Math.PI * 2,
        ease = 0.01;

      var k = {
        offsetRotation: 0,
        offsetScale: 0.8,
        offsetX: 0,
        offsetY: 0,
        radius: 1100,
        slices: 16,
        zoom: 1.5
      };

      body.appendChild(c);
      c.width = k.radius * 2;
      c.height = k.radius * 2;

      var tx = k.offsetX;
      var ty = k.offsetY;
      var tr = k.offsetRotation;

      win.addEventListener("mousemove", mousemove, false);
      function mousemove(e) {
        var cx, cy, dx, dy, hx, hy;
        cx = ww / 2;
        cy = wh / 2;
        dx = e.pageX / ww;
        dy = e.pageY / wh;
        hx = dx - 0.1;
        hy = dy - 0.1;
        tx = hx * k.radius * -0.8;
        ty = hy * k.radius * 0.8;
      }

      c.style.position = "fixed";
      c.style.marginLeft = -k.radius + "px";
      c.style.marginTop = -k.radius + "px";
      c.style.left = "50%";
      c.style.top = "50%";

      function update(fill) {
        tr -= 0.002;

        k.offsetX += (tx - k.offsetX) * ease;
        k.offsetY += (ty - k.offsetY) * ease;
        k.offsetRotation += (tr - k.offsetRotation) * ease;

        draw(fill);

        requestAnimationFrame(update);
      }

      function draw(fill) {
        ctx.fillStyle = fill;

        for (var i = 0; i <= k.slices; i++) {
          ctx.save();
          ctx.translate(k.radius, k.radius);
          ctx.rotate(i * step);
          ctx.beginPath();
          ctx.moveTo(-0.5, -0.5);
          ctx.arc(0, 0, k.radius, step * -0.51, step * 0.51);
          ctx.rotate(half_PI);
          ctx.scale(scale, scale);
          ctx.scale([-1, 1][i % 2], 1);
          ctx.translate(k.offsetX - cx, k.offsetY);
          ctx.rotate(k.offsetRotation);
          ctx.scale(k.offsetScale, k.offsetScale);
          ctx.fill();

          ctx.restore();
        }
      }
      var scale, step, cx;

      var img = new Image();
      img.onload = () => {
        scale = k.zoom * (k.radius / Math.min(img.width, img.height));
        step = two_PI / k.slices;
        cx = img.width / 2;
        update(ctx.createPattern(img, "repeat"));
      };

      img.src =
        "https://images.unsplash.com/photo-1504532472068-9ae844337da7?ixlib=rb0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e76ebffebd8e3c65985875554e36f35&auto=format&fit=crop&w=1334&q=80";
    </script>
  </body>
</html>

祝一切顺利。

Answer 4

在script标记内移动<body>代码

像这样：

<html>
<head>
</head>
<body>
<script type="application/javascript">
var doc = document,
    win = window,
    body = doc.body;

var ww = win.innerWidth,
    wh = win.innerHeight;

var c = doc.createElement('canvas'),
    ctx = c.getContext('2d');

var half_PI = Math.PI / 2,
    two_PI = Math.PI * 2,
    ease = 0.01;


var k = {
    offsetRotation: 0,
    offsetScale: .8,
    offsetX: 0,
    offsetY: 0,
    radius: 1100,
    slices: 16,
    zoom: 1.5
};

body.appendChild(c);
c.width = k.radius * 2;
c.height = k.radius * 2;

var img = new Image();
img.src = 'https://images.unsplash.com/photo-1504532472068-9ae844337da7?ixlib=rb0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6e76ebffebd8e3c65985875554e36f35&auto=format&fit=crop&w=1334&q=80'; 
var fill = ctx.createPattern(img, 'repeat'); 

var scale, step, cx;

scale = k.zoom * (k.radius / Math.min(img.width, img.height));
step = two_PI / k.slices;
cx = img.width / 2;

function draw(){

    ctx.fillStyle = fill;

    for (var i = 0; i <= k.slices; i++) {
        ctx.save();
        ctx.translate(k.radius, k.radius);
        ctx.rotate(i * step);
        ctx.beginPath();
        ctx.moveTo(-0.5, -0.5);
        ctx.arc(0, 0, k.radius, step * -0.51, step * 0.51);
        ctx.rotate(half_PI);
        ctx.scale(scale, scale);
        ctx.scale([ -1,1 ][i % 2], 1);
        ctx.translate(k.offsetX - cx, k.offsetY);
        ctx.rotate(k.offsetRotation);
        ctx.scale(k.offsetScale, k.offsetScale); 
        ctx.fill();

        ctx.restore();

    }

} 


var tx = k.offsetX;
var ty = k.offsetY;
var tr = k.offsetRotation;


win.addEventListener('mousemove', mousemove, false);
function mousemove(e){
    var cx, cy, dx, dy, hx, hy;
    cx = ww / 2;
    cy = wh / 2;
    dx = e.pageX / ww;
    dy = e.pageY / wh;
    hx = dx - 0.1;
    hy = dy - 0.1;
    tx = hx * k.radius * -.8;
    ty = hy * k.radius * .8;
}

c.style.position = 'fixed';
c.style.marginLeft = -k.radius + 'px';
c.style.marginTop = -k.radius + 'px'; 
c.style.left = '50%';
c.style.top = '50%';

function update() {
    tr -= 0.002; 

    k.offsetX += (tx - k.offsetX) * ease;
    k.offsetY += (ty - k.offsetY) * ease;
    k.offsetRotation += (tr - k.offsetRotation) * ease; 

    draw(); 

    requestAnimationFrame(update);
};
update();
</script>
</body>
</html>

如何正确地将JavaScript合并到html中？

4 个答案: