Как повторить шаблон HTML Canvas по диагонали

Question

Я создал шаблон холста и хочу повторить шаблон по диагонали на всей веб-странице.Так как свойство repeat поддерживает только repeat-x, repeat-y или repeat Оба направления, на данный момент я установил для него 'no-repeat' и попытался использовать offset или translate для перемещения моего шаблона по диагонали, но не получилось.

Вот что я получил сейчас:

введите описание изображения здесь

Вот что я хочу сделать: введите изображениеописание здесь

Я просто пытаюсь имитировать эффект, не нужно быть точно таким же.

Может кто-нибудь сказать мне, как продолжить мой рисунок по диагонали?Большое спасибо!

Вот некоторые из моих кодов:

      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>

Answer 1

Это решение рассматривает холст как чистый лист, а не как место для копирования / вставки рисунка.

Он создает вид повторяющегося рисунка, разделяя холст на квадраты и окрашивая каждый квадрат согласноего позиция в виртуальной сетке.

Спасибо 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>

Answer 2

Потребовалось довольно много усилий для достижения.Это обманчиво сложный вопрос.

Каждая позиция перемещается на что-то вроде x = x + (iterationY/3) * 2, y = iterationX, хотя мой код имеет денормализованные шаги итерации для ix и iy из 1/3, чтобы упроститьпричина перемещения по перекрестным блокам, например, 1/3 ширины или высоты креста.

Чтобы назначить идентификатор каждому кресту для раскраски, я возьму строку и столбец, где итерации x / y имеют шаг 1 какrow = iterationX % 2 и col = iterationY % 3, что дает строку, идущую от 0, 1 и т. Д., А col - от 0, 1, 2 и повторяющуюся.В этом случае я присваиваю col вес 2, то есть id = row+(col*2), чтобы каждый идентификатор был уникальным.Наконец, я определяю массив цветов, на который может ссылаться этот идентификатор.

const canvas = document.getElementById("canv");
const ctx = canvas.getContext('2d');
const w = window.innerWidth;
const h = window.innerHeight;
const s = 80;//size
const bs = s / 3;//block size
const gs = Math.max(w, h)/s;//grid size
canvas.width = w;
canvas.height = h;
let yAcc = 0;
let jx = 0;
let jy = 0;
const getColour = (jx, jy) => {
  const row = (jx%2);//0, 1
  const col = (jy % 3);//0, 1, 2
  //00, 10, 01, 11, 02, 12
  //0 , 1 , 2 , 3 , 4 , 5
  const id = row + (col*2);
  const colours = ['orange', 'blue', 'black', 'yellow', 'green', 'red']
  return colours[id];
}
for(let ix = 0; ix < gs; ix+=1/3){
  
  for(let iy = 0; iy < gs; iy+=1/3){
    const colour = getColour(jx, jy);
    let x = ix+iy*2-(gs);
    let y = iy+ix*3-(gs);
    ctx.fillStyle = colour;
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.rect(x * bs * 3, y * bs * 3 + bs, bs * 3, bs);
    
    ctx.rect(x * bs * 3 + bs, y * bs * 3, bs, bs * 3);
    ctx.fill();
    ctx.closePath();
    jy ++;
  }
  jx ++;
}

<canvas id="canv"></canvas>