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如果是小数，也会造成虚化的结果，如上图第三个方框。