Heim  >  Fragen und Antworten  >  Hauptteil

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

<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 第一次打开第一次加载可以显示,没问题,然后刷新就再也不显示了!

PHP中文网PHP中文网2771 Tage vor292

Antworte allen(3)Ich werde antworten

  • 伊谢尔伦

    伊谢尔伦2017-04-11 13:28:12

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

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-11 13:28:12

    问题可能出在

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

    改成

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

    试试

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-04-11 13:28:12

    题主更新了问题详情,基本可以很清晰的知道,问题不在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.

    Antwort
    0
  • StornierenAntwort