将勾选的图案添加到动态绘制的3人棋牌棋盘

Question

你好，你是一群美妙的天才！

我似乎已经达到了我在这里的知识高峰，并希望有人能指出我在正确的方向。

我正在尝试使用JavaScript和HTML 5画布动态绘制一个3人棋牌/跳棋板。

到目前为止，我已经想出了这个;

var canvas = document.getElementById('canvas') 
var length = canvas.height/2; 
var center = canvas.width/2; 

var rotation = ToRadians(60); 

var angle = ToRadians(30); 
var height = length * Math.cos(angle); 
var width = length * Math.sin(angle); 
while (rotation < Math.PI * 2) { 
    a = [center, length]; 
    b = [a[0] - height * Math.sin(rotation), a[1] + height * Math.cos(rotation)]; 
    c = [b[0] + width * Math.cos(rotation), b[1] + width * Math.sin(rotation)]; 
    d = [c[0] + width * Math.sin(angle + rotation), c[1] - width * Math.cos(angle + rotation)]; 

    //Drawing Main Frame and 6 segments 
    var c2 = canvas.getContext('2d'); 
    c2.fillStyle = '#f00'; 
    c2.strokeStyle = "#0f0"; 
    c2.beginPath(); 
    c2.moveTo(a[0], a[1]); 
    c2.lineTo(b[0], b[1]); 
    c2.lineTo(c[0], c[1]); 
    c2.lineTo(d[0], d[1]); 
    c2.closePath(); 
    c2.stroke(); 

    //Drawing first set of divides 
    ab1=[((a[0]+b[0])/2),((a[1]+b[1])/2)] 
    cd1=[((c[0]+d[0])/2),((c[1]+d[1])/2)] 
    ab2=[((a[0]+ab1[0])/2),((a[1]+ab1[1])/2)] 
    cd2=[((d[0]+cd1[0])/2),((d[1]+cd1[1])/2)] 
    ab3=[((b[0]+ab1[0])/2),((b[1]+ab1[1])/2)] 
    cd3=[((c[0]+cd1[0])/2),((c[1]+cd1[1])/2)] 

    c2.beginPath(); 
    c2.moveTo(ab1[0], ab1[1]); 
    c2.lineTo(cd1[0], cd1[1]);   
    c2.moveTo(ab2[0], ab2[1]); 
    c2.lineTo(cd2[0], cd2[1]);  
    c2.moveTo(ab3[0], ab3[1]); 
    c2.lineTo(cd3[0], cd3[1]); 
    c2.stroke(); 

    //Drawing second set of divides 
    bc1=[((c[0]+b[0])/2),((c[1]+b[1])/2)] 
    ad1=[((a[0]+d[0])/2),((a[1]+d[1])/2)] 
    bc2=[((c[0]+bc1[0])/2),((c[1]+bc1[1])/2)] 
    ad2=[((d[0]+ad1[0])/2),((d[1]+ad1[1])/2)] 
    bc3=[((b[0]+bc1[0])/2),((b[1]+bc1[1])/2)] 
    ad3=[((a[0]+ad1[0])/2),((a[1]+ad1[1])/2)] 

    c2.beginPath(); 
    c2.moveTo(bc1[0], bc1[1]); 
    c2.lineTo(ad1[0], ad1[1]);   
    c2.moveTo(bc2[0], bc2[1]); 
    c2.lineTo(ad2[0], ad2[1]);  
    c2.moveTo(bc3[0], bc3[1]); 
    c2.lineTo(ad3[0], ad3[1]); 
    c2.stroke(); 

    rotation += ToRadians(60); 
} 
function ToRadians(degrees) { 
    return degrees/(180/Math.PI); 
} 

小提琴：http://jsfiddle.net/yd7Wv/6529/

我对目前的代码相当请，但我来点，当我需要添加的检查模式，我彻底难倒。我几乎不知道如何去做这件事，所以想知道是否有人可以指引我走向正确的方向。 我知道在这里有一个普遍的共识，人们应该展示自己尝试去做，但我根本不能！ 任何指针，将不胜感激。

干杯

Answer 1

你在看什么与四边形变换密切相关。

您可以将一个段（“三角形”）看作是刚刚扭曲的象限。

Fiddle demo

将会产生这样的结果：

让我们从定义一些变量，我们需要计算和循环开始。

var w = canvas.width,    // width 
    h = canvas.height,    // height 
    cx = w * 0.5,     // center of board 
    cy = h * 0.5, 
    r = cx * 0.9,     // radius of board 
    pi2 = Math.PI * 2,    // cache 
    segments = 6,     // a hexagon based shape so 6 
    segment = pi2/segments,  // angle of each segment 
    hSegment = segment * 0.5,  // half segment for center line 
    ul, ur, bl, br,     // quad. corners 
    check = 0.25,     // interpolation interval (one check) 
    yc = 0, xc = 0,     // interpolation counters 
    toggle = false,     // for color 
    x, y = 0, i = 0;     // counters... 

允许通过定义它的外边界的角部限定一个单一的四边形正方形：

首先角将是板的中心上，使得一个很简单：

var ul = { 
    x: cx, 
    y: cy} 

第二角将是右上：

ur = { 
    x: cx + r * Math.cos(hSegment) * 0.865, 
    y: cy + r * Math.sin(hSegment) * 0.865 
}; 

第三个右下角：

br = { 
    x: cx + r * Math.cos(segment), 
    y: cy + r * Math.sin(segment) 
}; 

而在去年，左下：

bl = { 
    x: cx + r * Math.cos(hSegment + segment) * 0.865, 
    y: cy + r * Math.sin(hSegment + segment) * 0.865 
}; 

如果我们绘制出这种形状，我们会得到这样的：

现在我们有了角落我们根本插每个在检查间隔（0.25）的“方块”中行，这将总共给我们5行。我们只会计数4，但我们也会使用下一个行与当前值。

为了内插的两个点，我们用一个简单的函数，它有两个点，一个标准值[0.0,1.0]：

function getInt(p1, p2, t) { 
    return { 
     x: p1.x + (p2.x - p1.x) * t, 
     y: p1.y + (p2.y - p1.y) * t, 
    } 
} 

我们创建一个循环，通过Y和X点进行迭代，所以我们可以做到这一点以系统的方式：

for(y = 0, yc = 0; y < 4; y++) { 
    for(x = 0, xc = 0; x < 4; x++) { 

     // for upper lines (ul-ur), get first row: 
     var l1a = getInt(ul, bl, yc), 
      l1b = getInt(ur, br, yc), 
      l2a = getInt(ul, bl, yc + check), 
      l2b = getInt(ur, br, yc + check), 

      c1 = getInt(l1a, l1b, xc), 
      c2 = getInt(l1a, l1b, xc + check), 
      c3 = getInt(l2a, l2b, xc + check), 
      c4 = getInt(l2a, l2b, xc); 

     ... draw shape ... 

     xc += check; 
    } 
    yc += check;   
} 

本节：

var l1a = getInt(ul, bl, yc),   // current line [0, 3] 
    l1b = getInt(ur, br, yc), 
    l2a = getInt(ul, bl, yc + check), // next line [1, 4] 
    l2b = getInt(ur, br, yc + check), 

计算外部垂直线上的插值点。这给了我们两个新点，我们再使用来计算水平线上的点，使我们能够计算出每个角点的“检查”：

c1 = getInt(l1a, l1b, xc),   // corner 1 UL 
c2 = getInt(l1a, l1b, xc + check), // corner 2 UR (next line) 
c3 = getInt(l2a, l2b, xc + check), // corner 3 BR (next line) 
c4 = getInt(l2a, l2b, xc);   // corner 4 BL 

现在我们简单地画的角落，并填写之间的多边形：

ctx.beginPath(); 
ctx.moveTo(c1.x, c1.y); 
ctx.lineTo(c2.x, c2.y); 
ctx.lineTo(c3.x, c3.y); 
ctx.lineTo(c4.x, c4.y); 

ctx.fillStyle = toggle ? '#000' : '#fff'; 

要改变颜色，我们使用切换开关。

这种单一的部分将是这样的：

下一步是绘制所有领域。我们重新使用上面的代码，并且每次只将画布旋转一段，然后再做一次切换。

当所有的代码放在一起，我们得到这样的：

for(; i < segments; i++) { // loop six segments 
    toggle = !toggle;   // alter color each segment 
    // loop quadrilateral grid 4x4 cells (5x5 lines exclusive) 
    for(y = 0, yc = 0; y < 4; y++) { 
     for(x = 0, xc = 0; x < 4; x++) { 

      // for upper lines (ul-ur), get first row: 
      var l1a = getInt(ul, bl, yc), 
       l1b = getInt(ur, br, yc), 
       l2a = getInt(ul, bl, yc + check), 
       l2b = getInt(ur, br, yc + check), 
       c1 = getInt(l1a, l1b, xc), 
       c2 = getInt(l1a, l1b, xc + check), 
       c3 = getInt(l2a, l2b, xc + check), 
       c4 = getInt(l2a, l2b, xc); 

      ctx.beginPath(); 
      ctx.moveTo(c1.x, c1.y); 
      ctx.lineTo(c2.x, c2.y); 
      ctx.lineTo(c3.x, c3.y); 
      ctx.lineTo(c4.x, c4.y); 
      ctx.fillStyle = toggle ? '#000' : '#fff'; 
      ctx.fill(); 
      toggle = !toggle; 
      xc += check; 
     } 
     yc += check;   // next segment line 
     toggle = !toggle;  // toggle per line as well 
    } 
    ctx.translate(cx, cy); // translate to center 
    ctx.rotate(segment);  // rotate one segment 
    ctx.translate(-cx, -cy); // translate back 
} 

现在，如果你愿意等，你可以简单地画一个轮廓。