admin 管理员组

文章数量: 1086019

This simple Canvas script creates a rectangle with a 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>

This simple Canvas script creates a rectangle with a 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>
  • javascript
  • html
  • canvas
Share Improve this question edited May 18, 2011 at 3:40 Matthew Scharley 133k55 gold badges198 silver badges225 bronze badges asked May 18, 2011 at 3:36 John RJohn R 3,03613 gold badges51 silver badges62 bronze badges 1
  • Have you seen Issue 6 on the Google Code site? – Jeremy Commented May 18, 2011 at 3:57
Add a ment  | 

2 Answers 2

Reset to default 6

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./svn-history/r48/trunk/excanvas.js

本文标签： javascriptHTML5 canvas excanvasjs amp IE Text not showing in IE7Stack Overflow

版权声明：本文标题：javascript - HTML5 Canvas, excanvas.js &amp; IE. Text not showing in IE7 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744097503a2533171.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。