kineticjs虚化现象

在做项目中，使用kineticjs进行canvas相关操作，在使用过程中发现了一个问题，就是在创建的图像中，发现有时候会出现图像模糊，虚化的现象。如下图：

如上图，在左边方框与右边方框相比，左边明显清楚很多，右边明显有虚化反应，这是为什么呢？其实，对于三个方框，创建代码如下：

 var stage = new Kinetic.Stage({     container: "test",     width: 400,     height: 400});var layer = new Kinetic.Layer({     width: 400,     height: 400});var rect = new Kinetic.Rect({     x: 50,     y: 50,     stroke: 'red',     width: 50,     height: 80,     strokeWidth: 4});var rect1 = new Kinetic.Rect({     x: 150.432,     y: 50.65464,     stroke: 'red',     width: 50,     height: 80,     strokeWidth: 4});var rect2 = new Kinetic.Rect({     x: 250,     y: 50,     stroke: 'red',     width: 50.543543,     height: 80.543534,     strokeWidth: 4});layer.add(rect);layer.add(rect1);layer.add(rect2);stage.add(layer);

由上面代码可以看出，前两个方框的创建最大的不同之处就是在x,y上面，尤其因为x,y的数值不是整数，而是小数，所以在展示的时候，会由于程序处理而造成图像的虚化反应，这个在使用过程中，非常重要，而且非常容易遇到。

而且，需要注意的是，在使用过程中，不仅仅是x,y是小数时会造成虚化，其width,height如果是小数，也会造成虚化的结果，如上图第三个方框。