HTML5画布的形状与kineticjs缓存
萧辰沛
大幅度提高复杂kineticjs形状绘制性能的方法之一是高速缓存的图像。这可以通过使用toimage()方法将节点为一个图像对象的实现，然后实例化一个新的动力学与图像对象图像的形状。
这个教程绘制10而不是10个人缓存的星星约4倍拉伸性能提高。缓存可以被应用到任何节点，包括舞台，图层，组，和形状。
这个教程绘制10而不是10个人缓存的星星约4倍拉伸性能提高。缓存可以被应用到任何节点，包括舞台，图层，组，和形状。
注：本toimage()方法要求图像是由一个具有相同的域代码执行的Web服务器。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
innerRadius: 20,
outerRadius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 5,
numPoints: 5,
x: 60,
y: 60,
draggable: true,
shadowOffset: 5,
shadowColor: 'black',
shadowBlur: 5,
shadowOpacity: 0.5
});
layer.add(star);
stage.add(layer);
// convert star node into a cached image
star.toImage({
// cached image will be 120 x 120
width: 120,
height: 120,
/*
* when star has been converted into an image,
* use the image to instantiate image objects and
* then add them to the layer
*/
callback: function(img) {
for(var n = 0; n < 10; n++) {
var image = new Kinetic.Image({
image: img,
x: Math.random() * stage.getWidth(),
y: Math.random() * stage.getHeight(),
offset: 60,
draggable: true
});
layer.add(image);
}
layer.draw();
}
});
</script>
</body>
</html>
类似资料：