个人中心
gpt4 book ai didi

javascript - 实现 ge1doot 的视差代码笔

转载 作者：太空宇宙 更新时间：2023-11-04 07:30:49 25 4
gpt4 key购买 nike

我在我的网站上实现此 ( https://codepen.io/ge1doot/pen/oXWepr) codepen 时遇到问题。我想像以前那样替换图像。我研究了数百万个关于使用 javascript 在 Canvas 上绘图的问题，但它们似乎都指向两种解决方案之一:CORS header 和设置导致 Canvas 受污染，或者它们没有 image.onload 函数. CORS 对我来说应该不是问题，因为图像位于同一台服务器上，而且我有一个 image.onload 函数。我正在使用的修改后的代码如下。

这一行尤其可能导致问题:

var canvas  = ge1doot.canvas("canvas");

虽然我不知道。我不确定它到底在做什么，而且通过我数小时的阅读也无法完全弄明白。以我有限的理解，它可能与 document.getElementById 做同样的事情？而且，当我在 css 中更改它们的颜色时， Canvas 和背景显示得很好，只是图像本身没有显示。

HTML:

<!DOCTYPE html>
<html lang"en">

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="parallax.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>...</title> 
  </head>
  <body>
    <script type="text/javascript" script src="parallax.js"></script>    
    <canvas id="canvas"></canvas>
    <div id="frame"></div>
  </body>
</html>

CSS:

html {
  overflow: hidden;
  touch-action: none;
  content-zooming: none;
}
body {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}
#canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 400px;
  margin-left: -300px;
  margin-top: -200px;
  background: #fff;
}
#frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 700px;
  height: 500px;
  margin-left: -350px;
  margin-top: -250px;
  border-radius: 10px;
  box-shadow: 0px 0px 100px 0px #fda;
}

JavaScript:

! function () {

    "use strict"; 

    function chromaKey(source, id) {
        // create new image
        var imgSource = new Image();
        //imgSource.crossOrigin = "Anonymous"; Not sure if this should be commented out or not, but I think it should.
        imgSource.src = source;
        imgSource.onload = function () {
            // render image in canvas
            var jpg    = document.createElement('canvas');
            var w = jpg.width  = this.width;
            var h = jpg.height = this.height;
            var ctx = jpg.getContext('2d');
            ctx.drawImage(this, 0, 0, w, h);
            // chroma Key
            var img = ctx.getImageData(0, 0, w, h),
                data = img.data;
            for (var i =0, n = data.length; i < n; i += 4) {
                var r = data [i + 0];
                var g = data [i + 1];
                var b = data [i + 2];
                // make white transparent (rgb > 240, 240, 240)
                //if (r > 240 && g > 240 && b > 240) {  
                //  data[i + 3] = 0; 
                //} 
            }
            // create new transparent image
            var transparent = document.createElement('canvas');
            transparent.width = w;
            transparent.height = h;
            var ctx = transparent.getContext('2d');
            ctx.putImageData(img, 0, 0);
            images[id] = transparent;
        }
    }

    // draw parallax image
    function parallax (id, x, y) {
        var image = images[id];
        if (image) {
            ctx.drawImage(image, x, y);
        }
    }

    // main loop
    function run() {
        // request next frame
        requestAnimationFrame(run);
        // clear screen
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // ease pointer
        pointer.cx += (pointer.x - pointer.cx) / 10;
        pointer.cy += (pointer.y - pointer.cy) / 10;
        var rx = -((canvas.width  / 2) - Math.max(15, Math.min(pointer.cx, canvas.width - 15))) / 7;
        var ry = -((canvas.height / 2) - Math.max(0, Math.min(pointer.cy, canvas.height - 5))) / 4.75;
        // parallax
        parallax(0, -20 + (rx / 2), -80 + (ry * 2)); 
        parallax(1, -40 + (rx / 2),  20 + (ry / 2)); 
        parallax(2, -20 + (rx / 3),  90 + (ry / 3)); 
        parallax(3, -20 - (rx / 2), 130 - (ry / 2)); 
        parallax(4,   0 - (rx / 1), 160 - (ry / 1));
        parallax(5, 240 - (rx * 2), 220 - (ry * 2));
    }

    // canvas
    var canvas  = ge1doot.canvas("canvas"); //I think this might have something to do with it? Not sure.
    var ctx     = canvas.ctx;
    // pointer
    var pointer = canvas.pointer;
    pointer.cx  = pointer.x = canvas.width / 2;
    pointer.cy  = 0;
    pointer.y = canvas.height;
    // images
    var images = [];
    // make jpg images transparent images
    chromaKey("pengyu.jpg", 0);
    chromaKey("pengyu.jpg", 1);
    chromaKey("pengyu.jpg", 2);
    chromaKey("pengyu.jpg", 3);
    chromaKey("pengyu.jpg", 4);
    chromaKey("pengyu.jpg", 5);
    // zyva!
    run();

}();

最佳答案

关于这段引起问题的代码，您是对的。

var canvas = ge1doot.canvas("canvas");

如果你打开code pen你会看到有一个javascript文件正在被code pen导入

https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/canvas-pointer.js?v=20150516

确保你导入它们

<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222599/canvas-pointer.js?v=20150516"></script>

关于javascript - 实现 ge1doot 的视差代码笔，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49422987/

25 4 0
文章推荐： html - 使用 emmet 的错误图像系列
文章推荐： java - 为 install4j 安装程序创建自定义语言？
文章推荐： c - 用整数理解 printf()
文章推荐： html - CSS nth-child : How will nth-child will work even inside a container
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com