Bir kanvasın stil boyutunu JavaScript ile dinamik olarak nasıl değiştirebilirim?

Question

Bir kanvasın boyutu (genişlik ve yükseklik) değiştirilebilir, ancak kanvasın stil boyutu dinamik olarak değiştirilemez.

canvas = document.getElementById('test_fabric'); 
ctx = this.canvas.getContext('2d'); 
canvas.style.width = 1000; // does not work. 
canvas.style.height = 260; // does not work. 
canvas.width = 100; // works. 
canvas.height = 100; // works. 

Hem canvas.width ve iyi iş canvas.height, ancak her iki canvas.style.width ve canvas.style.height çalışmaz.

Benim durumumda, tuvalin stil boyutu yalnızca bir css dosyası veya tuvalin satır içi stili ile değiştirilebilir.

canvas#test_fabric { 
    width:400px; 
    height:400px; 
    background:gold; 
} 

veya

<div><canvas id="test_fabric" width="200" height="200" 
style="width:200px; height:200px"></canvas></div> 

Not: satır içi stil var olduğunda css dosyası etkisiz hale gelir.

Bir kanvasın stil boyutunu JavaScript ile dinamik olarak değiştirmenin yolu nedir?

Şimdiden teşekkürler!

Answer 1

Stil özelliklerinin genişliği ve yüksekliği, değerlerin ölçülmesini gerektirir, html özniteliklerinin genişliği ve yüksekliği gerektirmez. Yani, açıkça kodunuzda px, em or % vb ayarlamak gerekir: birim olmadan

canvas = document.getElementById('test_fabric'); 
ctx = canvas.getContext('2d'); 
canvas.style.width = '1000px'; // explicitly setting its unit 'px' 
canvas.style.height = '260px'; 

style.width/yükseklik css için geçersiz bir kuraldır.

Answer 2

i

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#test_fabric").css({"border-color": "#C1E0FF", 
       "border-width":"1px", 
       "border-style":"solid","height":"500px","width":"500px"}); 
     }); 
    </script> 
    <div class="col-md-12"> 
     <div><canvas id="test_fabric" width="200" height="200"></canvas></div> 
    </div>