动画的画布元素的尺寸

问题描述：

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

什么是最有效的方式来动画，同时仍然保持一个体面的帧率？

你真的需要修改元素的高度？你不能只更新内容的高度？ – Kaiido

@Kaiido不幸的是，是的。这个想法是，画布占据了页面的一半，但用户可以点击它将其展开为页面的整个大小。我考虑将画布作为容器的背景图片，但它也需要互动。 – mattrick

不幸的是，改变canvas元素的'width'和'height'属性会重置所附属上下文的所有属性。一种方法可能是通过CSS来完成，等待transitionend事件（仍然不被广泛支持），并且只有在css动画完成其工作后才更新属性。这样，您的画布在转换过程中可能会有点偏离，但之后就可以了。 – Kaiido

答

您可以使用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>

这与画布呈现的东西混淆：https：//codepen.io/anon/pen/zzZXYZ – mattrick

是的，这是@ Kaiido告诉你的。更改画布属性会影响渲染... – Alexis

动画的画布元素的尺寸

相关推荐