javascript - 用drawImage把画布画到画布上，为什么有的浏览器不显示？

Question

<canvas id="canvas" width=800 height=500></canvas>
<script type="text/javascript">
        function GED(ele){
            return document.getElementById(ele);
        }
canvas = GED('canvas');
        ctx = canvas.getContext('2d');
        

        var img = new Image();
        img.src='nor1.png';

        var canvasOffscreen = document.createElement('canvas');
        canvasOffscreen.width = 500;
        canvasOffscreen.height = 500;
function draw(){
            ctx.clearRect(0,0,500,500);
            if (img.complete){
                ctx.drawImage(canvasOffscreen,0,0);
             }else{
                img.onload = function(){
                    canvasOffscreen.getContext('2d').drawImage(this,0,0,500,500,0,0,500,500);
                    ctx.drawImage(canvasOffscreen,0,0);
                }
             }
        }
draw();
</script>

服务器用了，额，是火狐浏览器
--最新详细

火狐浏览器49 第一次打开第一次加载可以显示，没问题，然后刷新就再也不显示了！

Answer 1

我记得要搭建本地环境，也就是不能直接打开，本地要装个服务器

Answer 2

问题可能出在

                        canvasOffscreen.getContext('2d').drawImage(this,0,0,500,500,0,0,500,500);

改成

canvasOffscreen.getContext('2d').drawImage(this,0,0)

试试

Answer 3

题主更新了问题详情，基本可以很清晰的知道，问题不在canvas上，而在于对于img上。
img.complete这个只读属性，返回一个 Boolean 如果浏览器已经取出图像则返回true。但是这里有点特殊。

因为刷新的时候缓存过这个图片，在还没执行到onload的事件监听之前就已经加载完了，就会一直为true,从而导致onload里面的那一串drawImage 到 canvasOffscreen 的代码段根本没执行。从而直接ctx.drawImage了一个空白的canvasOffscreen。

已经有前人碰到过了，上一个链接 http://www.jb51.net/article/2... （说实话我也不知道这原文章是哪儿来的，抱歉，不然定引用原文。）

以下为原答案。

大兄弟啊，你自己都说在部分浏览器才不能显示，你能不能把那个部分浏览器的名字版本说一下呢。刚好我碰到的浏览器都能显示，咋debug。。

但是这个问题的确引起了我的注意，我特意去看了drawImage的兼容性相关介绍。 http://caniuse.com/#search=dr... 上找不到,只找到了mdn文档中的零星描述，粘贴过来供大家看看，散发下思路。
https://developer.mozilla.org...

兼容性注解

在 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)中，支持通过给 sw 和 sh 赋负值，对图像进行翻转。
从 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 开始，drawImage() 按照规范处理负参数，沿着合适的轴翻转矩形。
从(Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)开始，当drawImage()调用 null 或者 undefined 图像时，会抛出 TYPE_MISMATCH_ERR 异常。
在 Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)之前， 如果坐标值是非规定值或者是0，Firefox 会抛出一个异常。 按照规范描述，这种情况不会再发生。
Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)现在完全支持 CORS 跨域绘制图像，不需要污染的 canvas.
Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) 现在允许 SVG 作为图像被绘制到 canvas ，不需要 污染的 canvas.