Question

我正在努力使KineticJs html 5自定义形状。

但它不适用于Google Chrome。在Firefox中不可拖动，并且形状的大小也不相同。

任何人都可以说出原因吗？

实时代码http://jsfiddle.net/prantor19/wGE2a/8/

var stage = new Kinetic.Stage({
    container: 'canvas-container',
    width: 500,
    height: 500,
});

var layer = new Kinetic.Layer();

drawWindow = function(canvas) {
    var context = canvas.getContext();
    context.beginPath();
    context.moveTo(this.attrs.x,this.attrs.y);
    context.lineTo(this.attrs.width,this.attrs.y);
    context.lineTo(this.attrs.width,this.attrs.height);
    context.lineTo(this.attrs.x,this.attrs.height);
    context.closePath();
    context.clip();
    context.drawImage(img,this.attrs.img_x,this.attrs.img_y);
}

img = document.createElement('img');
img.src= "http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG/1024px-Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG";

var window1 = new Kinetic.Shape({
    drawFunc: drawWindow,
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    img:img,
    img_x:0,
    img_y:0,
    draggable: true
});

var window2 = new Kinetic.Shape({
    drawFunc: drawWindow,
    x: 10,
    y: 60,
    width: 100,
    height: 100,
    img:img,
    img_x:-250,
    img_y:0,
    draggable: true
});

pointercursor = function() {
    document.body.style.cursor = 'pointer';
}
defaultCursor = function() {
    document.body.style.cursor = 'default';
}

window1.on('mouseover',pointercursor );
window1.on('mouseout', defaultCursor);
window2.on('mouseover',pointercursor );
window2.on('mouseout', defaultCursor);

layer.add(window1);
layer.add(window2);

stage.add(layer);