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의 저자는 정말 멋진 자습서를 작성했습니다. 이 사진에서 그는 다른 것들과 함께 5 각형으로 이미지를 그립니다. 당신을 도울 정도로 충분해야합니다.

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