javascript - 修改画布大小时的 html5 画布行为

Question

当我修改 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>

在此处输入图像描述

score 0 · Accepted Answer

使用 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>

javascript - 修改画布大小时的 html5 画布行为

1 回答 1

Related

Reference