Html5 холст strokeStyle?

Я пытаюсь сопоставить изображение с сеткой "3d", которая имитирует ткань с использованием strokeStyle и холста, у меня есть изображение, но оно в настоящее время действует как фоновое изображение и фактически не течет с "тканью", как рябь, IE изображение статично по мере того, как сетка течет. здесь jsfiddle, который сам объясняет (работает только в Chrome). Буду признателен за любую оказанную помощь. вот javascript, который отображает изображение в фоновом режиме. Как прекратить рендеринг в качестве фонового изображения и только заполнить его?:

function update() {

    var img = new Image();
    img.src = 'http://free-textures.got3d.com/architectural/free-stone-wall-   textures/images/free-stone-wall-texture-002.jpg';
    img.onload = function() {

        // create pattern
        var ptrn = ctx.createPattern(img, 'repeat');

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        physics.update();

        ctx.strokeStyle = ptrn;
        ctx.beginPath();
        var i = points.length;
        while (i--) points[i].draw();
        ctx.stroke();

        requestAnimFrame(update);
    }
}

У него исходный codepen Я работаю. `updated fiddle с изображением вне функции update(): В настоящее время он фактически заполняет ячейки, а также применяет их в качестве фонового изображения. есть ли способ остановить его превращение в фоновое изображение и применять его только для заполнения сетки? Я пробовал это:
ctx.fillStyle = ptrn; и удаление строки 260:
ctx.strokeStyle = ptrn; но похоже, что фоновое изображение просто отображает его как черную сетку... еще раз спасибо за терпение

Ответ 1

О, мой! Большой вопрос!

Итак, посмотрим, что у нас есть. Система, которая имеет кучу "ограничений", которые являются наборами из двух точек. Пробелы сами попадают парами, и они образуют две линии, образуя форму ┘ (внизу справа от окна).

Если бы мы рисовали каждую линию ограничений индивидуально, мы увидели бы это:

Это все горизонтальные красные линии и вертикальные синие линии. Рисуя один, мы просто увидим, что форма ┘, и каждая длинная красная линия - это действительно сотни маленьких линий, нижняя часть каждой формы ┘, от конца до конца. Здесь несколько сотен ┘, и вместе они делают его похожим на сплоченную сетку. Тот факт, что каждый из нас уже индивидуально, делает это легко для нас.

Эта форма - это все, что нам нужно для определения своего рода ограничивающего прямоугольника. И похоже, что каждый Point в Constraint имеет исходные значения, поэтому мы сохраним их как sx и sy.

Если мы знаем границы ящиков в их новом местоположении, и мы знаем исходные границы, потому что мы сохранили все значения Point для Contraints, тогда мы должны быть золотыми.

Как только у нас есть исходная ограничивающая рамка Ограничения и ее текущий ограничивающий прямоугольник, почему все, что нам нужно сделать, это вызов drawImage с обоими полями: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

Я написал новую процедуру Constraint.prototype.draw, она выглядит так:

И так далее.

Есть несколько способов "исправить" дыры, и это действительно зависит от вас, иначе вам придется окунуться в трансформации.

Посмотрите на код. Я не сильно изменился. Ищите !!! в коде (мои правки) и DEBUG: в коде (код отладки в случае, если изображение не загружается или вы хотите увидеть каркасы).

http://jsfiddle.net/simonsarris/Kuw6P/

Код длинный, поэтому я не хочу вставлять его здесь, но здесь резервная копия в случае, если jsfiddle идет вниз: https://gist.github.com/simonsarris/5405304

И вот самая важная часть:

// !!! new super awesome draw routine! So cool we skipped naming it draw2!
Constraint.prototype.draw3 = function(otherP2) {

  // NOW dear friends consider what we have. Each box is made out of two lines,
  // the bottom and rightmost ones.
  // From these lines we can deduce the topleft and bottom-right points
  // From these points we can deduce rectangles
  // From the skewed rectangle vs the original rectangle we can "stretch"
  // an image, using drawImage overloaded goodness.

  // AND WE'RE OFF:

  // destination rect has 2 points:
  //top left: Math.min(this.p2.x, otherP2.x), Math.min(this.p2.y, otherP2.y)
  //bottom right: (this.p1.x, this.p1.y)

  // image destination rectangle, a rect made from the two points
  var dx = Math.min(this.p1.x,  Math.min(this.p2.x, otherP2.x));
  var dy = Math.min(this.p1.y,  Math.min(this.p2.y, otherP2.y));
  var dw = Math.abs(this.p1.x - Math.min(this.p2.x, otherP2.x));
  var dh = Math.abs(this.p1.y - Math.min(this.p2.y, otherP2.y));
  // DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
  //ctx.strokeStyle = 'lime';
  //ctx.strokeRect(dx, dy, dw, dh);

  // source rect 2 points:
  //top left: Math.min(this.p2.sx, otherP2.sx), Math.min(this.p2.sy, otherP2.sy)
  //bottom right: (this.p1.sx, this.p1.sy)

  // these do NOT need to be caluclated every time,
  // they never change for a given constraint
  // calculate them the first time only. I could do this earlier but I'm lazy
  // and its past midnight. See also: http://www.youtube.com/watch?v=FwaQxDkpcHY#t=64s
  if (this.sx === undefined) {
    this.sx = Math.min(this.p1.sx,  Math.min(this.p2.sx, otherP2.sx));
    this.sy = Math.min(this.p1.sy,  Math.min(this.p2.sy, otherP2.sy));
    this.sw = Math.abs(this.p1.sx - Math.min(this.p2.sx, otherP2.sx));
    this.sh = Math.abs(this.p1.sy - Math.min(this.p2.sy, otherP2.sy));
  }
  var sx = this.sx;
  var sy = this.sy;
  var sw = this.sw;
  var sh = this.sh;
  // DEBUG: IF THERE IS NO IMAGE TURN THIS ON:
  //ctx.strokeStyle = 'red';
  //ctx.strokeRect(sx, sy, sw, sh);


  // IF we have a source and destination rectangle, then we can map an image
  // piece using drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
  // Only problem, we're not exactly dealing with rectangles....
  // But we'll deal. Transformations have kooties anyways.
  ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
};