我正在尝试使用jQuery调整HTML5 canvas元素的大小。 （注意：不是画布内的对象，而是元素大小！）
我的代码只使用jQuery正常工作： http://jsfiddle.net/dAQBD/
但是当试图对KineticJS框架做同样的事情时，它根本不起作用。我的代码： http://jsfiddle.net/mLMSE/1/
我怀疑这是因为框架基于<div> - 通过 - （var stage = new Kinetic.Stage("div", 500, 200);）
有什么方法可以解决这个问题吗？我不想现在改变框架，因为我在我的真实项目上做了很多（这只是虚拟代码）。感谢。
（我知道我的小提琴说“扩大”，而实际上它们的尺寸减小了。错字。）
答案 0 :(得分：3)
jQuery的animate会获取CSS属性的地图。换句话说，您正在更改画布的CSS宽度，而不是画布的实际width属性。这很可能不是你想要的。你将不得不制作自己的动画功能（或者更聪明地使用jQuery，因为它只能在CSS上运行）。
你可以在这里做很多事情。一个想法（可能不是最好的想法）是将div设置为300的动画，并有一个计时器来检查div的clientWidth。计时器功能不断设置canvas.width等于div.style.clientWidth。通过这种方式，画布可以使用虚拟div进行动画制作。
答案 1 :(得分：2)
这没有做任何事情的主要原因是你只是用jquery调整容器大小。 kinetic用帆布元素填充容器。它绝对定位这些画布元素以实现分层效果，然后允许它在动画期间交换分层顺序。当您设置新的kinetic（）
时，这些绝对定位的画布元素会获得它们的尺寸你没有为exampleCanvas尝试过这样的css规则：
#exampleCanvas{ overflow: hidden; width: 500px; height: 200px; border: 2px solid red; position: relative; }
此外，kineticjs api具有.setSize（）方法，因此stage.setSize（width，height）可能是迈向解决方案的一步。所以，在animate回调中使用stage.setSize（300,200）;
如果这不具有所需的结果，您可以将容器中的canvas元素定位为：
$("#exampleCanvas").children("canvas").animate( ... );