キャンバス要素の寸法をアニメートする

Question

キャンバス要素の寸法をアニメーション化しようとしています（例えば、高さを上げるなど）。問題はキャンバス要素が正しく動作するために固定幅と高さが必要なため、純粋なCSSアニメーションは機能しません。

まともなフレームレートを維持しながら、これをアニメーション化する最も効率的な方法は何でしょうか？

Answer 1

あなたはCSS3アニメーションを使用することができ、それが働いて...

$(".btn").click(function(){ 
 
    $("#myCanvas").addClass("animated-class"); 
 
});

#myCanvas{ 
 
    border:solid 1px black; 
 
} 
 

 
.animated-class{ 
 
animation:test 1s linear forwards; 
 
} 
 

 
@keyframes test{ 
 
from{height:100px} 
 
to{height:300px} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn">Full page</button> 
 
<canvas id="myCanvas" width="200" height="100"></canvas>