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:
<scriptsrc="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
// Canvas settings
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
canvas.width=1158;
canvas.height=770;
// Preloading images to drastically improve performance
const currentFrame = index => (`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, '0')}.jpg`);
const frameCount = 148; // There 148 images for that animation-sequence to load
const images = [];
const preloadImages = () => {
for (let i = 1; i < frameCount; i++) {
images[i] = new Image(); // This is functionally equivalent to document.createElement('img').
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('html');
window.addEventListener('scroll', () => {
const scrollTop = html[0].scrollTop;
// console.log('scrollTop: ', scrollTop);
// console.log('html.scrollHeight: ', html[0].scrollHeight);
// console.log('window.innerHeight: ', 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('FrameIndex', frameIndex);
requestAnimationFrame(() => 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.
In the new code, you can probably tell that the <script> 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.
评论