修改画布大小时的 html5 画布行为答案

【问题标题】：html5 canvas behavior when canvas size is modified修改画布大小时的 html5 画布行为
【发布时间】：2013-07-23 19:20:47
【问题描述】：

当我修改 HTML5 Canvas 大小并绘制下一个文本时，文本的纵横比是倾斜的。我不希望这种行为。我做错了什么？

<!DOCTYPE HTML>
<html>  
    <script src="jquery-ui/js/jquery-1.9.1.js"></script>    
    <style> canvas{border:1px solid green}  </style>

    <body>  
    <canvas id="myCanvas" width="300" height="200"></canvas>    

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

    var myVar=setInterval(function(){repeat()},1000);

    function repeat(){      
        $('#myCanvas').css("height",height+=50);
        $('#myCanvas').css("width",300);
        // var canvas = document.getElementById('myCanvas');
        // var context = canvas.getContext('2d');   
        context.font = 'italic 40pt Calibri';
        context.fillText("Super test", 40, 100);        
    }
    </script>

【问题讨论】：

stackoverflow.com/questions/2588181/…

标签： javascript css html canvas aspect-ratio

【解决方案1】：

使用canvas.setAttribute('height', h); 而不是$('#myCanvas').css("height",h); ...

<!DOCTYPE HTML>
<html>  
    <script src="jquery-ui/js/jquery-1.9.1.js"></script>    
    <style> canvas{border:1px solid green}  </style>

    <body>  
    <canvas id="myCanvas" width="300" height="200"></canvas>    

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

    var myVar=setInterval(function(){repeat()},1000);

    function repeat(){      
        canvas.setAttribute('height', height+=50);

        context.font = 'italic 40pt Calibri';
        context.fillText("Super test", 40, 100);        
    }
    </script>

【讨论】：