IE9的canvas.height不变

Question

在Java脚本中，我正在更改HTML5画布的高度和宽度。 它可以在Mozila，Chrome，歌剧和野生动物园中使用，但在IE9中则无法使用。 谁能告诉我我在做什么错，我需要设置任何财产吗？

提前致谢

更新：-HTML：-

<body onload="Load();">
            <canvas id="myCanvas" width="500" height="300"></canvas>
</body>

Javascript：-

function Load(){
     var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext('2d');
     img=new Image();
     img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header
     img.onload = function(){
     canvas.width = 300;
     canvas.height = 500;
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.drawImage(img,0,0,canvas.width, canvas.height);
    }
}

CSS：

.canvas{
    height: auto;
    width: auto;
    margin : 0px 35px;
    border:1px solid black;
    position: relative;
}

Answer 1

请尝试以下代码。 它可以在IE9，Firefox，Chrome中运行：

<!DOCTYPE html>
<html>
<style language="css/text">
    .canvas{
    height: auto;
    width: auto;
    margin : 0px 35px;
    border:1px solid black;
    position: relative;
}
</style>

<body onload="Load();">
            <canvas id="myCanvas" width="500" height="300"></canvas>
            <input type="button" onClick="change()"/>
</body>

<script>
     var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext('2d');

function Load(){
     img=new Image();
     //img.src= "data:image/bmp;base64,"+respObj.respData; //Adding bmp image header

     canvas.width = 300;
     canvas.height = 500;
     context.fillStyle="#FF0000";
     context.fillRect(0, 0, canvas.width, canvas.height);
     //context.drawImage(img,0,0,canvas.width, canvas.height);
}

function change() {
     canvas.width = 100;
     canvas.height = 100;
    context.fillStyle="#FF0000";
    context.fillRect(0, 0, canvas.width, canvas.height);

}
</script>
</html>

Answer 2

我发现画布有问题。 这是风格的问题。 我已经从样式脚本中删除了高度和宽度设置。 因此，画布的高度和宽度被覆盖为其默认值，即高度和宽度分别为150和300。

IE9的canvas.height不变

问题描述

2 个解决方案

解决方案1
0 2012-11-29 09:29:29

解决方案2
0 2012-11-30 05:36:55

IE9的canvas.height不变

问题描述

2 个解决方案

解决方案1 0 2012-11-29 09:29:29

解决方案2 0 2012-11-30 05:36:55

解决方案1
0 2012-11-29 09:29:29

解决方案2
0 2012-11-30 05:36:55