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

【问题标题】：HTML5 image on hexagon not loading image but drawing hexagon black六边形上的 HTML5 图像不加载图像但绘制六边形黑色
【发布时间】：2014-04-07 02:53:27
【问题描述】：

我最近一直在玩 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>

它画了一个黑色的六边形，但上面没有图像，非常欢迎任何帮助。

谢谢，

利亚姆

【问题讨论】：

这是一个 jsFiddle 代码jsfiddle.net/z5pLF

标签： javascript html canvas kineticjs

【解决方案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/

【讨论】：

我将如何调整图像大小以使其更适合？
没关系，想通了fillPatternScale: {x:0.70, y:0.70}非常感谢！