如何制作“临时画布”图块以从中心开始绘制？

如何解决如何制作“临时画布”图块以从中心开始绘制？

我创建了一个临时的图块画布，该图块具有相同的图集图像和更多图像，我正在根据图像的大小（宽度和高度）绘制这些图块。我正在使用context.fillstyle重复模式。它们是水平或垂直绘制的，我想知道是否可以从中心绘制它们。因此，在图像上绘制的多余图块将在每个角上平均分配。但是现在，他们正在画布的右侧和中央创建额外的空间。我实际上想要的是这些多余的瓷砖空间，因为它们是墙上瓷砖的正确尺寸，这意味着它每次都随用户输入而变化。因此，它需要从中心绘制（重复），并且多余的图块分别位于顶部，左侧，右侧和底部。

请在此处找到带有瓷砖的画布（临时画布）的图像

canvas.width = canvas_width * 30;
canvas.height = canvas_height * 30;
var tiledCanvas = document.createElement("canvas");
var tCtx = tiledCanvas.getContext("2d");

tiledCanvas.width = size * 30;
tiledCanvas.height = tile_size_height * 30;
tCtx.drawImage(wallimg,wallimg.width,wallimg.height,size * 30,tile_size_height * 30);


// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.fillStyle = ctx.createPattern(tiledCanvas,'repeat');
ctx.beginPath();
ctx.rect(0,rectY,100400,100400);
ctx.closePath();

我可以制作这种图案以从画布的中心开始绘制，并在所有区域周围重复多余的图案吗？

解决方法

为了实现这一点，您可能需要进行一些计算

您需要图像的大小（高度和宽度）

画布的大小（高度和宽度）

现在要找到中心，您可以将画布的高度和宽度除以2

要绘制第一张图像，您将获得图像的高度和宽度，也将它们除以2以使其居中（中心点减去图像的一半）

然后，您可以通过减去第一幅图像的高度和宽度以及一半的高度，一半的宽度减去画布的高度和宽度来绘制第一幅图像的其他图像

，直到图像宽度大于画布宽度并且高度相同为止：

let ctx = mycan.getContext('2d');

base_image = new Image();
  base_image.src = 'https://bilious.alt.org/~paxed/nethack/nhsshot/tileset/nethack-3.4.3-16x16.png';
  base_image.onload = function(){
    const canvasCenterx = Math.floor(mycan.width/2);
    const canvasCentery = Math.floor(mycan.height/2);
    const imgcenterxandy = 16/2;
    
    for(let j = canvasCentery;j>=16;j-=16)
      for(let i = canvasCenterx;i>=16;i-=16)
      {
        ctx.drawImage(base_image,16,i-imgcenterxandy,j-imgcenterxandy,16);
        ctx.drawImage(base_image,(canvasCenterx+imgcenterxandy) + -(i-(canvasCenterx - imgcenterxandy))-imgcenterxandy,(canvasCentery+imgcenterxandy) + -(j-(canvasCentery - imgcenterxandy))-imgcenterxandy,16);
        }
    
  }
  
  

<canvas id = "mycan" width=300 height=200>
</canvas>

还有其他方法可以实现此目的，例如您可以调整图像大小并像往常一样绘制它，但是会出现变形，但不是很干净。

或仅通过将画布的宽度和高度除以图像的宽度和高度，然后将剩下的一半作为左边距来计算可以容纳在画布中的图像数量：

let ctx = mycan.getContext('2d');

base_image = new Image();
  base_image.src = 'https://bilious.alt.org/~paxed/nethack/nhsshot/tileset/nethack-3.4.3-16x16.png';
  base_image.onload = ()=>{
    
    for(let j = Math.ceil((mycan.height%16)/2);j<=mycan.height-Math.ceil((mycan.height%16)/2);j+=16)
      for(let i =Math.ceil((mycan.width%16)/2);i<=mycan.width-Math.ceil((mycan.height%16)/2);i+=16)
        ctx.drawImage(base_image,i,j,16);
    
  }

<canvas id=mycan height=250 width = 500></canvas>

您甚至可能希望在图像之间添加一些边距，如果您想将16px除以100个空格，这将变得更加复杂，您将不得不为每个图像添加一个px边距，以使其成比例。

let ctx = mycan.getContext('2d');

base_image = new Image();
  base_image.src = 'https://bilious.alt.org/~paxed/nethack/nhsshot/tileset/nethack-3.4.3-16x16.png';
  base_image.onload = ()=>{
    const numberOfImagesDrawnx = Math.floor(mycan.width/16);
    const numberOfImagesDrawny = Math.floor(mycan.height/16);
    const totalMarginx = numberOfImagesDrawnx*(Math.ceil(numberOfImagesDrawnx/(mycan.width%16)));
    const totalMarginy = numberOfImagesDrawny*(Math.ceil(numberOfImagesDrawny/(mycan.height%16)));
    
    for(let j = Math.ceil((mycan.height%16)/2);j<=mycan.height-Math.floor(mycan.height%(16+Math.ceil(numberOfImagesDrawny/(mycan.height%16))));j+=16+Math.ceil(numberOfImagesDrawny/(mycan.height%16)))
      for(let i =Math.ceil((mycan.width%16)/2);i<=mycan.width-Math.floor(mycan.width%(16+Math.ceil(numberOfImagesDrawnx/(mycan.width%16))));i+=16+Math.ceil(numberOfImagesDrawnx/(mycan.width%16)))
      {
        ctx.drawImage(base_image,16+Math.ceil(numberOfImagesDrawnx/(mycan.width%16)),16+ Math.ceil(numberOfImagesDrawny/(mycan.height%16)));
        }
    
  }

<canvas id=mycan width=500 height= 250></canvas>