Question

我在我的网站上实现此（https://codepen.io/ge1doot/pen/oXWepr）codepen时遇到问题。我想替换图像。我用javascript研究了数百万关于在画布上绘图的问题，但它们似乎都指向两种解决方案中的任何一种：CORS标题和设置导致污染的画布，或者它们没有image.onload函数。 CORS应该不是我的问题，因为图像位于同一台服务器上，我有一个image.onload功能。我正在使用的更改代码如下所示。

这一行特别可能导致问题：

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

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

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();

}();

Answer 1

你对这段代码导致问题是正确的。

var canvas = ge1doot.canvas（“canvas”）;

如果您打开代码笔，您会看到代码笔导入了一个javascript文件

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>

实现ge1doot的parallax codepen

1 个答案: