gpt4 book ai didi

javascript - Canvas 中的重复图像?

转载 作者:行者123 更新时间:2023-11-28 00:49:21 27 4
gpt4 key购买 nike

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

<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();

最佳答案

在 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();
};

关于javascript - Canvas 中的重复图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48348214/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com