动画由KineticJS框架创建的HTML5 Canvas的大小

Question

我正在尝试更改 canvas 元素的 size 元素=“nofollow”> kineticjs framework - 这不是画布内的对象，但元素的大小。

由于jQuery .animate函数无法在此事件中使用（它更改CSS，我希望它更改元素的实际属性），我必须开发 我自己的函数 ，它使用内部 stage.setSize(width, height) 通过KineticJS API提供的功能。 我根本没有在编写动画功能的经验，所以我可能会完全逼近这种情况。

问题： 它是<浓度>性能依赖于，因此通常不够快，而且归功于setInterval）。更不用说它仅在移动设备上部分工作（iPhone 4S IOS 5.0.1测试）。即使在移动设备上，任何解决方案也必须更完美或更短地工作。

我正在寻找改善这个功能的不同方式。拍摄。

（对于那些没有看到我的代码链接的人; http://jsfiddle.net / g4nuh / animateResize是相关功能。）

Answer 1

After some research, I found my own hacky-solution. An example using jQuery.animate. Had to animate them all, since KineticJS has several background layers.

    //Gather all canvases
    var canvases = document.getElementsByTagName("canvas");

    //Animate their size
    for(var c in canvases) {
       $(canvases[c]).animate({
          'width': "100px",
          'height': "100px"
       }, 500);
    }

Answer 2

Without knowing the specifics of your final application, I would recommend avoiding animation of the canvas size if you can. As you probably know, if you change the size of a canvas element, everything stored on it is wiped clean. This means that animating the dimensions requires you to adjust the width and/or height incrementally while re-drawing the entire canvas at each iteration. For a desktop, this probably isn't a huge issue. Mobile devices will struggle, though.

Instead, I would suggest that you fake the animation by increasing the size of a container element (with a border, background color, etc. so the animation is apparent). Then, when the animation is done, save your current canvas data to a temporary object, increase the size of your canvas, and stamp the old content back on it.

If you are looking to animate the canvas dimensions to reveal content that is already present on a larger theoretical canvas (i.e. the user has a small window that's cropping the full canvas), you would be better off playing with your CSS width and height along with the overflow: hidden; property. With this approach you would be editing your full canvas during all draw operations, but animating the size of your viewport would be simple and smooth.

Answer 3

The canvas is a view port for graphics, it can be the entire size of your document. You can use the context.clip() function to define the area you wish to display instead of resizing the canvas which requires the html box model to be updated. (your performance problem!)

ctx.moveTo(162, 20);
ctx.lineTo(162, 320);
ctx.lineTo(300, 320);
ctx.lineTo(300, 20);
ctx.clip();