开发者

HTML5 Canvas, excanvas.js & IE. Text not showing in IE7

This simple Canvas script creates a rectangle with 开发者_如何学JAVAa border and text. It works in Chrome and FireFox. But the text does not work in Internet Explorer 7.0. I have included excanvas.js; for this reason the rectangle and border show up in IE 7. However, the text is not showing up in IE 7. I want to know if it is possible to get this simple script to work in IE 7 and 8?

<!DOCTYPE html> 
<html lang="en">
<head>
    <link href = "style.css" type = "text/css" rel = "stylesheet" />
    <script src="js/excanvas.js" type="text/javascript"></script>

    <script type="text/javascript"> 
    function addBox(){
        var c = document.getElementById("myCanvas");
        context=c.getContext("2d"); 

        //Inner rectangle with shadow
        context.fillStyle = 'red';
        context.shadowColor="brown";
        context.shadowBlur = 20;
        context.fillRect(402,227,96.5,48.5); 
        context.shadowColor = null; 
        context.shadowBlur = null;      

        //Outer Rectangle
        context.lineWidth = '5';
        context.strokeStyle='green';    
        context.strokeRect(400,225,100,50); //draws just the edges of a rectangle               

        //font
        context.font = '17px Arial';        
        context.textBaseline = 'top';  
        context.fillStyle    = 'black';
        context.fillText  ('hello', 433, 243);
    }

    </script>
</head>

<body onload="addBox()"> 

    <canvas id="myCanvas" width="900" height="500">Your browser does not support the canvas element.</canvas> <br />
    <script type="text/javascript">     
        c = document.getElementById("myCanvas"); 
        cxt4=c.getContext("2d");
        resetCanvas();
    </script>
</body>
</html>


I just tried this on mine and had the same results. Then I found that I was using an earlier revision of excanvas. Ran the code again with this version and it worked in IE8. Haven't tested on IE7 but with some luck it will work.

Steve


The fillText is working when i changed excanvas.js file http://canvas-text.googlecode.com/svn-history/r48/trunk/excanvas.js

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜