如何使用vanilla JS從重繪中刪除畫布
[英]how to remove canvas from redrawing with vanilla JS
問題描述
我正在嘗試復制像 airpods 一樣的滾動效果，它正在工作，但在作為附件滾動時有一些效果。
我加載了 94 張圖像以使其滾動 360 度並預加載 148 張圖像。 我知道如果我使用 ScrollTrigger JS 插件可以刪除滾動效果，但我只想使用 vanilla JS 來構建它。
如何刪除圖像上的效果（滾動時）？
const html = document.documentElement; const canvas = document.getElementById("hero-lightpass"); const context = canvas.getContext("2d"); const frameCount = 148; //Getting file path const currentFrame = index => (`https://connectplus.s3.ap-southeast-2.amazonaws.com/connect-plus/${index.toString().padStart(4, '0')}.png`) //To preload the images of 148 as initialized above, then we loop through each image from the file path and create a new image const preloadImages = () => { for(let i = 1; i < frameCount; i++){ const img = new Image(); img.src = currentFrame(i); } }; const img = new Image() img.src = currentFrame(1); canvas.width = 1158; canvas.height = 770; img.onload = function(){ context.drawImage(img, 0, 0); } const updateImage = index => { img.src = currentFrame(index); context.drawImage(img, 0, 0); } window.addEventListener('scroll', () => { context.fillRect(0, 0, canvas.width, canvas.height); const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min( frameCount - 1, Math.ceil(scrollFraction * frameCount) ); requestAnimationFrame(() => updateImage(frameIndex + 1)) }); preloadImages()
html { height: 100vh; } body { margin: 0; padding: 0; width: auto; height: auto; } .test { height: 500vh; background-color: #ffffff; }
<html> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <body> <!--Scrolling effect without a library--> <div id="mainDiv" class="test bg-white"> <canvas id="hero-lightpass" class=" sticky justify-center items-center top-1/4 left-1/4 transform -translate-x-1/4 -translate-y-1/4 max-w-screen-2xl max-h-screen overflow-hidden"></canvas> </div> </body> </html>
1 個解決方案
解決方案1
0 2021-10-26 02:51:24
嘗試在您的預加載器中使用閉包（並且不要在循環中使用 const）...加上一些加載驗證以防止畫布在尚未加載的圖像上崩潰：
const html = document.documentElement; const canvas = document.getElementById("hero-lightpass"); const context = canvas.getContext("2d"); const frameCount = 148; //Getting file path const currentFrame = index => (`https://connectplus.s3.ap-southeast-2.amazonaws.com/connect-plus/${index.toString().padStart(4, '0')}.png`) //To preload the images of 148 as initialized above, then we loop through each image from the file path and create a new image var imgCache = {}; const preloadImages = () => { for(let i = 1; i < frameCount; i++){ let img = new Image(); img.src = currentFrame(i); var obj = { img : img, loaded : false } img.onload = (function(Vobj){ return function(){ Vobj.loaded = true; } }(obj)) imgCache[i] = obj; } }; const img = new Image() img.src = currentFrame(1); canvas.width = 1158; canvas.height = 770; img.onload = () => { context.drawImage(img, 0, 0); } const updateImage = index => { var item = imgCache[index]; if(item && item.loaded){ context.drawImage(item.img, 0, 0); } } window.addEventListener('scroll', () => { context.fillRect(0, 0, canvas.width, canvas.height); const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min( frameCount - 1, Math.ceil(scrollFraction * frameCount) ); requestAnimationFrame(() => updateImage(frameIndex + 1)) }); preloadImages()
html { height: 100vh; } body { margin: 0; padding: 0; width: auto; height: auto; } .test { height: 500vh; background-color: #ffffff; }
<html> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <body> <!--Scrolling effect without a library--> <div id="mainDiv" class="test bg-white"> <canvas id="hero-lightpass" class=" sticky justify-center items-center top-1/4 left-1/4 transform -translate-x-1/4 -translate-y-1/4 max-w-screen-2xl max-h-screen overflow-hidden"></canvas> </div> </body> </html>
需要幫助將織物 canvas 的代碼從 Vanilla JS 轉換為 ReactJS
[英]Need help converting code for fabric canvas from Vanilla JS to ReactJS
如何從數組中刪除數字（ item ）並僅顯示字符串？ 使用香草 js
[英]How to remove number ( item ) from array and show only strings? using vanilla js
你將如何從一個 div 中刪除創建的節點並使用 Vanilla JS 將其顯示到另一個 div？
[英]How would you remove a created node from one div and display it to another div using Vanilla JS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.