Question

我正在尝试使用excanvas让canvas与IE一起工作。但它似乎没有出现在任何地方。

以下代码适用于除IE之外的所有浏览器。

我尝试按照关于excanvas'项目页面的建议无济于事。

任何帮助将不胜感激！

  <html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="excanvas.compiled.js"></script>
    </head>
    <body id="body">


<script type="text/javascript">

    load();

    function load(){

        var canvas = document.createElement("canvas");

        if(typeof G_vmlCanvasManager !== "undefined")
            G_vmlCanvasManager.initElement(canvas);

        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#FF0000";
                ctx.beginPath();
                ctx.arc(50,50,12,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();

        document.getElementById("body").appendChild(canvas);
    }




</script>
    </body>
</html>

Answer 1

不要问我为什么，但显然在创建一个静态画布并绘制到它之后，动态创建的那些开始工作......另外，在正文的“onload”中调用“load”方法 - 而不是这样做直接 - 似乎也很重要（再次，为什么它的表现方式超出了我的理解）。

以下解决方案对我来说很好（IE6）：

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="excanvas.compiled.js"></script>
    </head>
    <body onload="load()" id="body">
        <canvas id="static" style="display:none"></canvas>
        <script type="text/javascript">
            function load(){
                // Static
                var canvas = document.getElementById("static");
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "#FF0000";
                        ctx.beginPath();
                        ctx.arc(50,50,12,0,Math.PI*2,true);
                        ctx.closePath();
                        ctx.fill();
                // Dynamic
                var canvas = document.createElement("canvas");

                if(typeof G_vmlCanvasManager !== "undefined")
                    G_vmlCanvasManager.initElement(canvas);

                var ctx = canvas.getContext("2d");
                ctx.fillStyle = "#FF0000";
                        ctx.beginPath();
                        ctx.arc(50,50,12,0,Math.PI*2,true);
                        ctx.closePath();
                        ctx.fill();

                document.getElementById("body").appendChild(canvas);
            }
        </script>
    </body>
</html>

Excanvas：不在页面上显示

1 个答案: