对画布使用createPattern()

我试图得到一个重复的画布图案。遗憾的是，我能找到的所有例子都在重复一个图像。所以我试着这样做:

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

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

任何在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/

如果你想用jcanvas这样做，@Caleb531刚刚更新版本5.3b使用@SimonSarris的链接作为模型:

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

相关内容

最新更新

热门标签：