用html5和dynamicjs显示六角形内的图像

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/

Answer 3

我有解决方案。

发布晚（迟到总比没有好）

应该是：

fill: {image: "css/images/logo.png", offset: [0, 0]}