动画画布元素的尺寸

Question

我正在尝试为canvas元素的尺寸设置动画（例如，增加它的高度）。问题是canvas元素需要一个固定的宽度和高度才能正常工作，所以纯CSS动画不起作用。

什么是最有效的动画制作方法，同时仍保持不错的帧速率？

Answer 1

你可以使用CSS3动画，它正在......

＆＃13;

＆＃13;

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

＆＃13;

#myCanvas{
  border:solid 1px black;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;