Question

我之前一直在玩HTML5画布，并试图将图像绘制到六边形上。我一直在使用KineticJS来执行此操作，以下是我正在使用的代码

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Request System</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="kinetic-v5.0.1.min.js"></script>
</head>

<body>
    <div id="container">
    </div>

    <script>            
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 578,
            height: 600
        });
        var layer = new Kinetic.Layer();

        logo = new Image();
        logo.onload = function() {
            var hexagon = new Kinetic.RegularPolygon({
                x: stage.width()/2,
                y: stage.height()/2,
                sides: 6,
                radius: 200,
                fill: {image: logo},
                stroke: 'black',
            });

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

            // add the layer to the stage
            stage.add(layer);
        };
        logo.src = "https://hiveradio.net/api/icebreath/?func=get&mod=cover&artist=NIIC";
    </script>
</body>
</html>

它绘制了一个黑色六边形，但没有任何图像，任何帮助它都非常欢迎。

谢谢，

利安

Answer 1

使用fillPatternImage代替fill：

var hexagon = new Kinetic.RegularPolygon({
        x: stage.width()/2,
        y: stage.height()/2,
        sides: 6,
        radius: 200,
        fillPatternImage: logo,
        fillPatternOffset: {x:250, y:250},
        stroke: 'black',
});

http://jsfiddle.net/z5pLF/3/

六角形上的HTML5图像不加载图像，但绘制六边形黑色

1 个答案: