在画布中以响应高度重复图像
[英]Repeating image in a canvas with responsive height
问题描述
I'm trying to create a canvas where I have an image as a background that repeats horizontally and adapts the height automatically. 
我正在尝试创建一个画布，在其中我有一个图像作为背景，可水平重复并自动调整高度。
I've managed to repeat the background image following the x-axis but I'm unable to make the height responsive. 我设法重复了沿x轴的背景图像，但无法使高度响应。
This is my code so far: 到目前为止，这是我的代码：
const cvs = document.getElementById("canvas"); const ctx = cvs.getContext("2d"); const bg = new Image(); bg.src = "http://lorempixel.com/100/100"; const draw = () => { const ptrn = ctx.createPattern(bg, "repeat-x"); ctx.fillStyle = ptrn; ctx.fillRect(0, 0, canvas.width, canvas.height); requestAnimationFrame(draw); }; draw();
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <canvas id="canvas" width="1000" height="200"></canvas> <script src="index.js"></script> </body> </html>
TLDR : I would like to be able to have an image within my canvas that repeats horizontally and its height is responsive.
Thanks in advance. 提前致谢。
3 个解决方案
解决方案1
1 已采纳 2019-06-17 20:58:28
Hopefully the explanation in the comments answers your question. 希望评论中的解释能够回答您的问题。 Feel free to ask for clarification. 随时要求澄清。
const cvs = document.getElementById("canvas"); const ctx = cvs.getContext("2d"); // First stretch the canvas so we can get // the full size of teh browser window cvs.style.height = '100vh'; cvs.style.width = '100vw'; // Now adjust actual canvas size to match const {width, height} = cvs.getBoundingClientRect(); cvs.height = height; cvs.width = width; const bg = new Image(); // Should always wait for onload // before drawing to prevent race condition. bg.onload = ()=>{ var x=0; while(x < cvs.width){ ctx.drawImage(bg, x, 0, 100, cvs.height); x += bg.width; } // draw the image a bunch of times // var x=0, y=0; // while(x < cvs.width && y < cvs.height){ // ctx.drawImage(bg, x, y); // x += bg.width; // if(x > cvs.width){ // x = 0; // y += bg.height; // } // } }; bg.src = "http://lorempixel.com/100/100";
<canvas id="canvas"></canvas> <script src="index.js"></script>
解决方案2
1 2019-06-17 21:45:33
If I got it right you want to fill the height and repeat horizontally, is that correct? 如果我做对了，您想填充高度并水平重复，是否正确？
const cvs = document.getElementById("canvas"); const ctx = cvs.getContext("2d"); var bg = new Image(); bg.src = "http://lorempixel.com/100/100"; var tempCanvas = document.createElement("canvas"), tCtx = tempCanvas.getContext("2d"); var imgWidth = 200; var imgHeight = 200; const draw = () => { tempCanvas.width = imgWidth; tempCanvas.height = imgHeight; tCtx.drawImage(bg, 0, 0, 100, 100, 0, 0, imgWidth, imgHeight); const ptrn = ctx.createPattern(tempCanvas , "repeat-x"); ctx.fillStyle = ptrn; ctx.fillRect(0, 0, canvas.width, canvas.height); requestAnimationFrame(draw); }; bg.onload = () => { draw(); }
<!DOCTYPE html> <html> <head> <title>Test</title> </head> <body> <canvas id="canvas" width="1000" height="200"></canvas> <script src="index.js"></script> </body> </html>
解决方案3
0 2019-06-17 20:33:59
try setting up the image size to match the canvas size just like that: 尝试设置图像尺寸以匹配画布尺寸，如下所示：
bg.src = " http://lorempixel.com/200/200 "; bg.src =“ http://lorempixel.com/200/200 ”;
Cheers! 干杯! :) :)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.