используя createPattern () с холстом - PullRequest
Новая
       14

используя createPattern () с холстом

3 голосов
/ 03 апреля 2011

Я пытаюсь получить повторяющийся рисунок холста.К сожалению, все примеры, которые я мог найти, повторяют изображение.Итак, я попробовал это: 

function init() {
var canvas = document.getElementById("bg");
var ctx = canvas.getContext("2d");

//creating a new canvas  
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;
var img = canvas.getContext("2d");

draw(img);
var objPattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = objPattern;
ctx.fillRect(0, 0, document.body.clientHeight, document.body.clientWidth);
}

function draw(img) {
  //img.save();
  img.beginPath();
  img.moveTo(0.0, 40.0);
  img.lineTo(26.9, 36.0);
  img.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
  img.lineTo(40.0, 0.0);
  img.lineTo(11.8, 3.0);
  img.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
  img.lineTo(0.0, 40.0);
  img.closePath();
  img.fillStyle = "rgb(188, 222, 178)";
  img.fill();
  img.lineWidth = 0.8;
  img.strokeStyle = "rgb(0, 156, 86)";
  img.lineJoin = "miter";
  img.miterLimit = 4.0;
  img.stroke();
  //img.restore();
}

и включил его в html-файл следующим образом: 

<body onload="init()">
<canvas id="bg" width=100%; height=100%;></canvas>
…

Я действительно не хочу использовать циклы для повторения шаблона «вручную»используя смещения, поскольку я чувствую (и надеюсь), что должен быть более легкий подход.Сохранение и восстановление в коде отрисовки используются в некоторых руководствах и примерах, но на самом деле они не имеют никакого смысла для меня, поэтому я прокомментировал их.

Ответы [ 2 ]

10 голосов
/ 04 апреля 2011

Все, что получает изображение в Canvas, также может содержать элемент Canvas.

Вот пример кода рисования, создающего шаблон, и пользовательская функция шаблона в случае, если вам требуется более детальное управление.

Ключевым моментом, который следует здесь отметить, является то, что размер созданного холста составляет всего 40x40 пикселей, достаточно большого, чтобы в нем можно было сохранить рисунок.

1 голос
/ 27 апреля 2012

Если вы хотите сделать это с , @ Caleb531 только что обновил версию 5.3b , используя ссылку @SimonSarris в качестве модели:

http://jsfiddle.net/caleb531/Nxcz8/7/

...