HTML5画布strokeStyle？ [英] html5 canvas strokeStyle?

问题描述

我试图将图像映射到一个3D网格使用strokeStyle和帆布，我有图像包括模拟布，但它目前作为背景图像，而不是真正流淌着的布的是涟漪，IE中的图像是静态的，因为网格流动。 这里的的jsfiddle 这是自我解释（只适用于Chrome浏览器）。 任何帮助是非常AP preciated。 这里是图像渲染到后台的JavaScript，如何从渲染作为背景图像停下来，只能使其填补了电网？：

I am trying to map an image to a "3d" grid that simulates cloth using strokeStyle and canvas, i have the image included but it is currently acting as a background image and not actually flowing with the "cloth" as is ripples, I.E the image is static as the grid flows. here's the jsfiddle which is self explanatory ( only works in Chrome). any help is much appreciated. here is the javascript that renders the image into the background, How do i stop from rendering as a background image and only make it fill the grid?:

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 我的工作。     `更新拨弄与功能更新外树形象（）： 它目前看来实际填充细胞以及将其应用为背景图像。有没有什么办法来阻止它成为一个背景图像，只适用于它填补了网格？我试过这样：
   ctx.fillStyle = PTRN; 和删除行260：
ctx.strokeStyle = PTRN; 但似乎移除背景图像只显示其为黑色网格......再次感谢您的耐心

Hers's the original codepen I'm working from. `updated fiddle with image outside function update(): It currently seems to actually fill the cells as well as applying it as a background image. is there any way to stop it becoming a background image and only apply it to fill the grid? I've tried this:
ctx.fillStyle = ptrn; and removing line 260:
ctx.strokeStyle = ptrn; but it seems to remove the background image just displaying it as a black grid... thank you again for the patience

推荐答案

哦，我的！问得好！

因此​​，让我们来看看我们已经有了。系统有一堆的约束，这是一组2分。约束上自己是成对出现的，它们使两条线，形成了┘形状（盒的右下角）。

So let's see what we've got. A system that has a bunch of "constraints", which are sets of 2 points. Contraints themselves come in pairs, and they make two lines, forming a ┘ shape (the bottom-right of a box).

如果我们绘制每一个约束线单独，我们会看到这一点：

If we were to draw every constraint line individually we'd see this:

这是所有水平的红色线条和垂直的蓝线。绘制单一，我们只希望看到┘的形状，每个长红线实际上是成百上千的小线，每个┘<底部/ code>形状，首尾。有几百┘在这儿，和他们一起使它看起来像一个有凝聚力的网格。事实上，每个人都是个体已经使这容易做到的。

That's all horizontal red lines and vertical blue lines. Drawing a single one we'd just see that ┘ shape, and each long red line is really hundreds of little lines, the bottom of each ┘ shape, end to end. There are several hundred ┘s here, and together they make it look like a cohesive mesh. The fact that each one is already individual makes this easy for us.

这形状就是我们需要确定边界框的排序一个。它看起来像每个点在约束带有原始值，所以我们会拯救那些为 SX 和 SY 。

That shape is all we need to determine a sort-of bounding box. And it looks like each Point in a Constraint comes with original values, so we'll save those as sx and sy.

如果我们知道的箱子在新位置的范围，我们知道原来的界限beecause我们已经保存的所有点的值的约束上，那么我们就应该是金色的。

If we know the bounds of the boxes at their new location, and we know the original bounds beecause we've saved all the Point's values for the Contraints, then we should be golden.

一旦我们有一个约束和其目前的边框，在原有边框为什么，我们所要做的就是调用的drawImage与这两个框： ctx.drawImage（IMG，SX，SY，SW ，SH，DX，DY，DW，DH）;

Once we have the original bounding box of a Constraint and its current bounding box, why, all we have to do is call drawImage with both boxes: ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

我写了一个新的 Constraint.prototype.draw 常规，它是这样的：

I wrote a new Constraint.prototype.draw routine, It looks like this:

等等。

有几种方法你可以打补丁的漏洞，它真的取决于你，否则你将不得不哄骗与变革。

There are a few ways you could "patch" the holes, and its really up to you, otherwise you'll have to finagle with transformations.

看一看在code。我并没有太大变化。在code查找！（我的编辑）和 DEBUG：在code （调试code的情况下，图像不加载，或者您想看到的线框图）。

Have a look at the code. I didn't change much. Look for !!! in the code (my edits) and DEBUG: in the code (debug code in case the image does not load or you wanna see the wireframes).

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

在code是长，所以我不希望这一切粘贴在这里，但这里的情况下的jsfiddle备份停机：<一href="https://gist.github.com/simonsarris/5405304">https://gist.github.com/simonsarris/5405304

The code is long so I don't wanna paste it all here, but here's a backup in case jsfiddle goes down: 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's 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);
};

这篇关于HTML5画布strokeStyle？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！