javascript - 为什么此动画在 IE 11 和 Edge 中有效，但在 Chrome 中无效？

Question

基于this javascript tutorial我写了一个简单的动画作为测试。它在 Edge/IE 11 上运行没有任何问题，然后我尝试在 Chrome 和 Canvas 上运行它，脚本将加载并且显然可以工作，但屏幕上没有显示任何内容。调试器中也没有显示任何错误。我尝试重新安装 Chrome，但问题仍然存在。 有人可以向我解释一下发生了什么事吗？提前致谢。

这是一个jsFiddle举个例子，它不会在 chrome 上加载(至少对我来说)

    // screen size variables
    var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight;        

      var canvas = document.createElement('canvas');
      var c = canvas.getContext('2d');

    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;

    var xpos=0, 
        ypos=0, 
        index=0, 
        numFrames = 30, 
        frameSize= 200;

      // Add our drawing canvas
      document.body.appendChild(canvas); 

       //load the image
    image = new Image();
    image.src = "http://dl.dropbox.com/u/1143870/sprite%20sheet/robot2.png";

    image.onload = function() {

        //we're ready for the loop
        setInterval(loop, 1000 / 30);
    }


    function loop() {
        //clear the canvas!
        c.clearRect(0,0, SCREEN_HEIGHT,SCREEN_WIDTH);

        /*our big long list of arguments below equates to: 
            1: our image source
            2 - 5: the rectangle in the source image of what we want to draw
            6 - 9: the  rectangle of our canvas that we are drawing into

            the area of the source image we are drawing from will change each time loop() is called.
            the rectangle of our canvas that we are drawing into however, will not. 
            tricky!
        */
        c.drawImage(image,xpos,ypos,frameSize,frameSize,0,0,frameSize, frameSize);

        //each time around we add the frame size to our xpos, moving along the source image
        xpos += frameSize;
        //increase the index so we know which frame of our animation we are currently on
        index += 1;

        //if our index is higher than our total number of frames, we're at the end and better start over
        if (index >= numFrames) {
            xpos =0;
            ypos =0;
            index=0;    
        //if we've gotten to the limit of our source image's width, we need to move down one row of frames                
        } else if (xpos + frameSize > image.width){
            xpos =0;
            ypos += frameSize;
        }


    }

更新:登录 Dropbox 似乎可以解决 jsFiddle 的问题。但这不是我真正的问题，因为我自己的版本使用本地文件。无论如何，我都会将此标记为已解决。

Answer 1

如果您将图像 URL 上的协议(protocol)更改为 https，则您的 jsFiddle 可在 Chrome 和 Firefox 中运行。修改并运行 jsFiddle here .

同样，当 URL 以 https 开头时，我只能将裸图像加载到 Chrome 和 Firefox 中。

<小时/>

我发现 Chrome 在使用 http 时在原始请求中包含了一个 header :

Upgrade-Insecure-Requests:1

您可以阅读该 header here 。我想知道 Dropbox 是否没有正确处理该 header 。