Question

基于this javascript tutorial我写了一个简单的动画作为测试。它在Edge / IE 11没有任何问题的情况下工作，然后我尝试在Chrome和画布上运行它，脚本将加载并显然可以工作，但屏幕上没有显示任何内容。调试器中也没有显示错误。我尝试重新安装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

如果您将图片网址上的协议更改为https，则您的jsFiddle可在Chrome和Firefox中使用。修改并使用jsFiddle here。

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

我看到Chrome在使用http时包含了原始请求的标头：

Upgrade-Insecure-Requests:1

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

为什么这个动画在IE 11和Edge中工作但不在chrome中？

1 个答案: