项目在 CodePen 上运行正常,但在集成开发环境(IDE)上无法运行。

huangapple go评论70阅读模式
英文:

Project works on codepen but not on IDE

问题

Oh, wow, you're diving into some coding adventures! 🌟 Let's see if we can help you with this. 🤓

It sounds like you're trying to reverse engineer an animation from a CodePen, but you're running into some errors. First things first, let's take a look at your code.

In your HTML, you have a canvas element with the id "hero-lightpass," and you're trying to access it in your JavaScript. However, it seems like there might be an issue with finding that canvas element.

Here's a playful idea: Maybe the canvas decided to go on a little adventure and got lost in the HTML forest! 😄 Let's make sure it stays put.

First, double-check that your HTML and JavaScript files are in the same directory. If they are, try adding this line of code at the bottom of your HTML file, just before the closing tag:

<script src="script.js"></script>

This will make sure your JavaScript file is properly linked to your HTML.

Also, ensure that your canvas element has the correct ID, which is "hero-lightpass," just like in your JavaScript.

Once you've made these adjustments, give it another try, and let's hope your canvas is back from its little adventure and ready to create some magic! 🎨✨

If you still encounter issues, let me know, and we can keep investigating together! 🚀

英文:

I'm trying to reverse engineer an animation from this codepen

my HTML

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
    &lt;canvas id=&quot;hero-lightpass&quot;&gt;&lt;/canvas&gt;  
&lt;/body&gt;
&lt;/html&gt;

My CSS

html {
height: 100vh;
}

body {
background: #000;
height: 500vh;
}

canvas {
position: fixed;
left: 50%;
top: 50%;
max-height: 100vh;
max-width: 100vw;
transform: translate(-50%, -50%);
}

h1 {
    color: white;
}

My JS:

// Canvas settings
    const canvas = document.getElementById(&quot;hero-lightpass&quot;);
    const context = canvas.getContext(&quot;2d&quot;);

    canvas.width=1158;
    canvas.height=770;

    
    // Preloading images to drastically improve performance
    const currentFrame = index =&gt; (`https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, &#39;0&#39;)}.jpg`);
    const frameCount = 148; // There 148 images for that animation-sequence to load
    const images = [];

    const preloadImages = () =&gt; {
        for (let i = 1; i &lt; frameCount; i++) {
            images[i] = new Image(); // This is functionally equivalent to document.createElement(&#39;img&#39;).
            images[i].src = currentFrame(i);
        }
    };

    preloadImages();


    // Draw the first image
    const img = new Image();
    img.src = currentFrame(1);
    img.onload = function(){
        context.drawImage(img, 0, 0);
    }


    // Scroll interactions
    const html = document.getElementsByTagName(&#39;html&#39;);
    
    window.addEventListener(&#39;scroll&#39;, () =&gt; {  
        const scrollTop = html[0].scrollTop;
        // console.log(&#39;scrollTop: &#39;, scrollTop);
        // console.log(&#39;html.scrollHeight: &#39;, html[0].scrollHeight);
        // console.log(&#39;window.innerHeight: &#39;, window.innerHeight);
        const maxScrollTop = html[0].scrollHeight - window.innerHeight;
        const scrollFraction = scrollTop / maxScrollTop;
        const frameIndex = Math.min(
            frameCount - 1,
            Math.floor(scrollFraction * frameCount)
        );
        // console.log(&#39;FrameIndex&#39;, frameIndex);

        requestAnimationFrame(() =&gt; context.drawImage(images[frameIndex + 1], 0, 0));

    });

but it doesn't work on my computer for some reason. It gives me the error message

"Uncaught TypeError TypeError: Cannot read properties of null (reading 'getContext')
at <anonymous> (/home/philocalyst/Desktop/test/script.js:3:32)"
in my terminal and

"Uncaught TypeError: canvas is null
<anonymous> file:///home/philocalyst/Desktop/test/script.js:3"
in my console

the code is an exact copy of the codepen, but with the linking of the css and javascript. I can't figure out what I did wrong.

I tried linking the two together and reading the code and messages.

答案1

得分: 1

就像@BagusTesa在评论中提到的,它不起作用的原因显然是因为脚本中的画布选择器返回了null

这是因为DOM尚未完全加载,脚本需要等待直到它准备好:

window.addEventListener("load", function() {
  // 代码放在这里
});

或者你需要将脚本的源代码或代码放在闭合的</body>标记之前:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档</title>
</head>
<body>
  <canvas id="hero-lightpass"></canvas>
  <script src="script.js"></script>
</body>
</html>

在新代码中,你可能已经注意到<script>标记被放在了画布元素之后,因此当脚本运行时,它知道画布已经加载了,因为它在该元素加载后运行。

还可以参考此来源(MDN)

英文:

Like @BagusTesa said in the comments, the reason it is not working is clearly because the canvas selector in your script returns null.

This is because the DOM has not fully loaded yet and the script needs to wait until it's ready:

window.addEventListener(&quot;load&quot;, function() {
  // Code goes here
});

Or you need to put the script's source or code before the closing &lt;body&gt; tag:

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;canvas id=&quot;hero-lightpass&quot;&gt;&lt;/canvas&gt;
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

In the new code, you can probably tell that the &lt;script&gt; tag is put after the canvas element so when the script runs, it knows that the canvas is there because it is run after that element has loaded.

Also refer to this source (MDN)

huangapple
  • 本文由 发表于 2023年7月17日 10:28:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76701188.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定