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>
- Have you seen Issue 6 on the Google Code site? – Jeremy Commented May 18, 2011 at 3:57
2 Answers
Reset to default 6I 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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744097502a4558214.html
评论列表（0条）