时间戳

首页 > 解决方案 > 如何对角重复 HTML Canvas 模式

javascript - 如何对角重复 HTML Canvas 模式

问题描述

我创建了一个画布图案，并希望在整个网页中对角重复该图案。由于repeat 属性仅支持repeat-x、repeat-y 或repeat 两个方向，我现在将其设置为“no-repeat”并尝试使用偏移或平移来对角移动我的图案，但没有成功.

这是我现在得到的：

在此处输入图像描述

这是我想要完成的： 在此处输入图像描述

我只是想模仿效果，不需要完全相同。

有人能告诉我如何对角线继续我的模式吗？非常感谢！

以下是我的一些代码：

      var patternCanvas = document.createElement('canvas');
			var patternContext = patternCanvas.getContext('2d');
			patternCanvas.width = 350;
			patternCanvas.height = 350;

			patternContext.fillStyle = "orange";
			patternContext.fillRect(0, 50, 150, 50);
			patternContext.fillRect(50, 0, 50, 150);

			patternContext.fillStyle = "black";
			patternContext.fillRect(100, 100, 150, 50);
			patternContext.fillRect(150, 50, 50, 150);

			patternContext.fillStyle = "green";
			patternContext.fillRect(200, 150, 150, 50);
			patternContext.fillRect(250, 100, 50, 150);

			patternContext.fillStyle = "darkred";
			patternContext.fillRect(0, 100, 50, 150);
			patternContext.fillRect(0, 150, 150, 50);

			patternContext.fillStyle = "blue";
			patternContext.fillRect(100, 150, 50, 150);
			patternContext.fillRect(50, 200, 150, 50);

			patternContext.fillStyle = "yellow";
			patternContext.fillRect(200, 200, 50, 150);
			patternContext.fillRect(150, 250, 150, 50);
		
			var canvas = document.getElementById("myCanvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			var context = canvas.getContext('2d');

			var pattern = context.createPattern(patternCanvas, 'no-repeat');
			context.fillStyle = pattern;
			context.fillRect(0, 0, 350, 350);
<canvas id="myCanvas"></canvas>

标签： javascripthtmlcanvas

解决方案

此解决方案将画布视为白板，而不是复制/粘贴图案的地方。

它通过将画布分成正方形并根据其在虚拟网格中的位置为每个正方形着色来创建重复图案的外观。

感谢irchans对数学的帮助。

const
  // Creates a canvas, and a context
  canvas = document.getElementById("myCanvas"),
  context = canvas.getContext('2d'),

  // Configures colors, unit-square size, and the number of unit squares to draw
  colors = "blue,yellow,darkred,green,orange,black".split(","),
  unit = 50,
  gridDimensionX = 10,
  gridDimensionY = 10;

// Makes the canvas wide enough for its content
canvas.width = unit * gridDimensionX;
canvas.height = unit * gridDimensionY;

// Builds a grid of squares, each of which is assigned a color
const grid = makeGrid(gridDimensionX, gridDimensionY, colors);

// Loops through the grid and draws each square
drawGrid(grid, context, unit);


// Defines the `makeGrid` function
function makeGrid(gridDimensionX, gridDimensionY, colors){
  const grid = [];
  for(let y = 0; y < gridDimensionY; y++){
    const row = [];
    for(let x = 0; x < gridDimensionX; x++){
      
      // Assigns coordinates to each not-yet-drawn square, along two axes 
      //   (rotated 60 degrees from the vertical and horizontal axes)
      //   and groups squares according to these coordinates
      cell = {
        slantyRowGrp: Math.round((2 * y - x) / 5, 0),
        slantyColGrp: Math.round((y + 2 * x) / 5, 0)
      }
      
      // Assigns a color to each square based on its 'slanty' grouping
      cell.colorIndex = (cell.slantyRowGrp + 2 * cell.slantyColGrp) % colors.length;
      cell.color = colors[cell.colorIndex];

      // Adds the cell to the row
      row.push(cell);
    }

    // Adds the completed row to the grid
    grid.push(row);
  }
  // Returns the completed grid
  return grid;
}

// Defines the `drawGrid` function
function drawGrid(grid, context, unit){
  grid.forEach( (row, y) => {
    row.forEach( (cell, x) => {

      // Fills each square with its assigned color
      context.fillStyle = cell.color;
      context.fillRect(unit * x, unit * y, unit, unit);
      
      // Displays the 'slanty' row and column group numbers
      /*
      context.fillStyle = "lightgrey";
      context.fillText(
        `${cell.slantyRowGrp}; ${cell.slantyColGrp}`,
        unit * x + unit/2.5,
        unit * y + unit/2
      );
      */
    });
  });
}
<canvas id="myCanvas"></canvas>

推荐阅读