Question

我正在尝试重复拍摄图像，但图像根本没有出现？我不确定我做错了什么或如何解决这个问题。我想知道是否有人可以提供帮助？

<head>
    <style type="text/css">
    canvas {
        background: black;
    }

    html, body, div, canvas {
        margin: 0;
        padding: 0;
    }

    html, body {
        overflow: hidden;
    }
    </style>
</head>
<body>
    <canvas id="my_canvas"></canvas>
    <script src="/js/all.js"></script>
</body>

JS：

var canvas = null;
    var context = null;

    setup = function() {
        canvas = document.getElementById("my_canvas");
        context = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        var image = new Image();
        image.src = 'http://example.com/tile.png';

        var pat = context.createPattern(img, "repeat");  // repeat the image as a pattern
        context.fillStyle = pat;
        context.rect(0,0,150,100); 
        context.fill(); 
    };

    setup();

Answer 1

You need to wait for the image to load before painting it on the canvas

var image = new Image();
image.src = 'http://example.com/tile.png';    
image.onload = function() {
    var pat = context.createPattern(img, "repeat");  // repeat the image as a pattern
    context.fillStyle = pat;
    context.rect(0,0,150,100); 
    context.fill(); 
};

画布中的重复图像？

1 个答案: