Question

我正在尝试获得重复的画布图案。可悲的是，我能找到的所有例子都重复一个图像。所以我试过这个：

function init() {
var canvas = document.getElementById("bg");
var ctx = canvas.getContext("2d");

//creating a new canvas  
var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 400;
var img = canvas.getContext("2d");

draw(img);
var objPattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = objPattern;
ctx.fillRect(0, 0, document.body.clientHeight, document.body.clientWidth);
}

function draw(img) {
  //img.save();
  img.beginPath();
  img.moveTo(0.0, 40.0);
  img.lineTo(26.9, 36.0);
  img.bezierCurveTo(31.7, 36.0, 36.0, 32.1, 36.0, 27.3);
  img.lineTo(40.0, 0.0);
  img.lineTo(11.8, 3.0);
  img.bezierCurveTo(7.0, 3.0, 3.0, 6.9, 3.0, 11.7);
  img.lineTo(0.0, 40.0);
  img.closePath();
  img.fillStyle = "rgb(188, 222, 178)";
  img.fill();
  img.lineWidth = 0.8;
  img.strokeStyle = "rgb(0, 156, 86)";
  img.lineJoin = "miter";
  img.miterLimit = 4.0;
  img.stroke();
  //img.restore();
}

并将其包含在html文件中，如下所示：

<body onload="init()">
<canvas id="bg" width=100%; height=100%;></canvas>
…

我真的不想使用循环来“手动”重复使用偏移的模式，因为我觉得（并希望）应该有一个更简单的方法。绘图代码中的保存和恢复在一些教程和示例中使用，但它们对我没有任何意义，所以我对它们进行了评论。

Answer 1

在Canvas中拍摄图像的任何内容都可以采用Canvas元素。

以下是制作图案的绘图代码示例，以及自定义图案功能，以防您需要更精细的控制。

这里需要注意的关键是创建的画布只有40x40像素，大小足以容纳图案。

http://jsfiddle.net/UxDVR/7/

Answer 2

如果您想使用jcanvas执行此操作，@ Caleb531刚刚使用@SimonSarris链接更新version 5.3b作为模型：

http://jsfiddle.net/caleb531/Nxcz8/7/

将createPattern（）与画布一起使用

2 个答案: