html文档中strokestyle,HTML5画布的StrokeStyle？(html5 canvas strokeStyle?)

天啊！ 问得好！

让我们看看我们有什么。 具有一串“约束”，这是一组2个点的系统。 约束上本身成对出现，并且它们使两条线，形成┘形状(箱的右下角)。

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

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

这形状我们需要确定排序的边框。 它看起来像每个Point的Constraint自带的原始值，所以我们会保存这些作为sx和sy 。

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

一旦我们有一个约束和当前边框的原边框，为什么，我们所要做的就是调用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'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);

};