캔버스 크기가 수정 된 경우 html5 캔버스 동작

HTML5 캔버스 크기를 수정하고 다음 텍스트를 그릴 때 텍스트의 종횡비가 비뚤어집니다. 나는이 행동을 기대하지 않는다. 내가 도대체 뭘 잘못하고있는 겁니까? 대신 canvas.setAttribute('height', h);$('#myCanvas').css("height",h);을 사용한 것을캔버스 크기가 수정 된 경우 html5 캔버스 동작

<!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>

enter image description here

출처

2013-05-19 Abe

http://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css- but-normal-with-width-height-properties – Andreas

...

<!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>

출처

2013-05-19 14:44:08 Abe

캔버스 크기가 수정 된 경우 html5 캔버스 동작

답변

관련 문제