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作为高度和宽度。

canvas.height没有改变IE9

2 个答案: