用html5和kineticjs顯示六角形內的圖像

Question

我想繪製一個六邊形並使用html5顯示一個圖像。 我已經嘗試過，但我沒有得到圖像作爲結果。 我只想爲此使用kineticjs。

下面是代碼：

function hexagon(){ 
    var stage = new Kinetic.Stage({ 
     container: "container" 
    }); 

    var layer = new Kinetic.Layer(); 

    var hexagon = new Kinetic.RegularPolygon({ 
     x: 100, 
     y: 100, 
     sides: 6, 
     radius: 100, 
     fill: {image: "css/images/logo.png"}, 

     stroke: "royalblue", 
     strokeWidth: 2 
    }); 

    // add the shape to the layer 
    layer.add(hexagon); 
    // add the layer to the stage 
    stage.add(layer); 
} 

Answer 1

填充拍攝圖像對象。請嘗試以下操作：

var layer = new Kinetic.Layer(); 

logo = new Image(); 
logo.src = "css/images/logo.png"; 

var hexagon = new Kinetic.RegularPolygon({ 
     x: 100, 
     y: 100, 
     sides: 6, 
     radius: 100, 
     fill: {image: logo}, 

     stroke: "royalblue", 
     strokeWidth: 2 
    }); 

    // add the shape to the layer 
    layer.add(hexagon); 
    // add the layer to the stage 
    stage.add(layer); 
} 

Answer 2

KinectJS的作者寫了一些非常棒的教程。在這幅畫中，他畫了五角形的形象，以及其他一些東西。應該足以幫助你。

http://www.html5canvastutorials.com/kineticjs/html5-canvas-set-fill-with-kineticjs/