在画布上使用 createPattern()答案

【问题标题】：using createPattern() with a canvas在画布上使用 createPattern()
【发布时间】：2011-04-03 16:19:47
【问题描述】：

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

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>
…

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

【问题讨论】：

标签： javascript html canvas design-patterns repeat

【解决方案1】：

任何在 Canvas 中使用图像的东西也可以使用 Canvas 元素。

以下是您制作图案的绘图代码示例，以及一个自定义图案功能，以防您需要更细粒度的控制：

<!-- HTML -->
<canvas id="canvas1" width="500" height="500"></canvas>

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');



// set up a pattern
var pattern = document.createElement('canvas');
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext('2d');

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

var pattern = ctx.createPattern(pattern, "repeat");
ctx.rect(0,0,200,200);
ctx.fillStyle = pattern;
ctx.fill();

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

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

【讨论】：

请包含链接代码的相关部分，以防链接失效，您的答案不会变得不可用。
当然，@totymedli

【解决方案2】：

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

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

【讨论】：