3

我画了一个圆角矩形网格，我需要用图像背景填充它们。最终我会有很多图像背景，但现在，我正试图让它与一个一起工作。我很接近，我的矩形绘制但填充有点奇怪 - 它自身重叠并杀死我的图案（边缘除外）基本上用图像填充整个画布。我试图“剪裁”我的路径，但这只会导致填充一个矩形。我不确定我做错了什么，我希望画布专家能发现它？

/* build rounded rectangle */
var roundedRect=function(ctx,x,y,width,height,radius,fill,stroke) 
{ 

 ctx.save(); // save the context so we don't mess up others ctx.beginPath(); 

// draw top and top right corner ctx.moveTo(x+radius,y);
ctx.arcTo(x+width,y,x+width,y+radius,radius); 

// draw right side and bottom right corner 
ctx.arcTo(x+width,y+height,x+width-radius,y+height,radius); 

// draw bottom and bottom left corner 
ctx.arcTo(x,y+height,x,y+height-radius,radius); 

// draw left and top left corner 
ctx.arcTo(x,y,x+radius,y,radius); 
ctx.clip(); 

if(fill){ ctx.fill(); } 

if(stroke){ ctx.stroke(); } 

 ctx.restore(); // restore context to what it was on entry 
} 

/* onload, fill canvas with pattern of rounded rectangles separated by 2px */
window.onload = function() {
var canvas = document.getElementById("canvas");
/* rounded filled rectangle pattern */
var canvasWidth=530;
    var canvasHeight=530;
    var recWidth=42;
    var recHeight=42;
    var grout=2;
    var radius=2;
    var cols=canvasWidth/(recWidth+grout);
    var rows=canvasWidth/(recHeight+grout);


    /* loop through each row/column to build pattern */
    alert("rows" + rows + " & cols " + cols);
    for (i=1; i<rows; i++){
        for (j=1; j<cols; j++){
            var ctx = canvas.getContext("2d");
            /* fill pattern */
            var img=document.getElementById("poppy");
            var pat=ctx.createPattern(img,"repeat");
            ctx.fillStyle=pat;  
            roundedRect(ctx,(j*grout + (j-1)*recWidth),(i*grout + (i-1)*recHeight),recWidth,recHeight,radius,true,false);       

                }
             }
};
4

1 回答 1

2

假设您的问题在此 JSFiddle 中重现：http: //jsfiddle.net/hBEwr/。（如果不是这种情况，这个答案的其余部分是~bunk；请编辑以匹配您的确切问题。）

  1. 如果我们从等式中完全删除模式，我们可以看到它不是直接的罪魁祸首。
    http://jsfiddle.net/hBEwr/1/
    相反，圆形矩形不会在它们之间留下必要的灌浆。

  2. 由于所有内容都相互重叠，因此我们将填充颜色更改为低不透明度的蓝色。有趣的！
    http://jsfiddle.net/hBEwr/2/
    我们看到许多路径被一次又一次地绘制。这种洞察力使我们更仔细地研究了实现，roundedRect()并注意到我们从不调用beginPath(). 确实，在您上面问题的代码中，它似乎已被评论吃掉了。如果没有这个调用，每次调用都会向不断增长的路径roundedRect()添加额外的矩形，而不是重新开始。

  3. 添加beginPath()回调用，我们看到我们正在走向成功：http:
    //jsfiddle.net/hBEwr/3/

  4. 现在我们可以在模式中添加回来（稍作改动）并取得辉煌的胜利：http:
    //jsfiddle.net/hBEwr/4/
    罂粟！ 罂粟！ 罂粟！

关于我所做的其他小调整的一些注释：

  • 确保您始终使用var本地变量：

    for (i=0; i<10; i++)     // Oops! i is a global variable
for (var i=0; i<10; i++) // Much better

  • 重新获取 , 并为每个图块创建图案是低效ctx的img。在上面的最终代码中，为了简单和快速，我将它们移到了循环之外。

  • 使用console.log而不是alert进行调试通常要容易得多。（打开开发者控制台查看输出。）

  • 我在列计算中添加了灌浆的最后外行/列，以确保有空间可以包含它。随心所欲地使用或不使用。

于 2012-07-13T03:27:58.400 回答