Question

我只使用js和html5画布。我使用画布绘制多个填充图案，并使用特定形状（不是矩形）的图像。

我非常希望能够在一张画布上做到这一点，但是我还没想到它。

然而，我已经想出了如何做多个堆叠的画布。每个都有自己的图案填充为具有绝对位置的图层。

最终产品是我希望观众右键点击并且＆＃34;另存为＆＃34;。但是你现在可以猜到，只有顶层才会被保存。

我正在考虑使用Chrome构建它。

所以我正在寻找的答案是通用的＆＃34;如何在一个画布中以多种形状进行多次图案填充（重复）＆＃34; （这是最好的答案！）。

或通用＆＃34;如何＆＃39;另存为＆＃39;所有堆叠的画布层都是.png＆＃34;

提醒：只使用Javascript和html。

以下作品。我使用弧来简化发布的形状。但正如我所提到的，这里只有canvas1被保存为png。

如果这是将它放入单个画布的方法，请告诉我。另外，如何保存所有画布层？

（绝对值0x，0y.z-index＃匹配画布号）

var canvastest0 = document.getElementById('canvas0');
var ctx0 = canvastest0.getContext('2d');

ctx0.arc(100,100, 50, 0, Math.PI*2,true);
ctx0.arc(150,150, 50, 0, Math.PI*2,true);
ctx0.clip();
img0 = new Image();
img0.src="pattern0.png";
img0.addEventListener('load', function(e) {
  ctx0.fillStyle = ctx0.createPattern(this, 'repeat') 
  ctx0.fill();
}, true);

var canvastest1 = document.getElementById('canvas1');
var ctx1 = canvastest1.getContext('2d');

ctx1.arc(100,100, 25, 0, Math.PI*2,true);
ctx1.arc(150,150, 25, 0, Math.PI*2,true);
ctx1.clip();

img1 = new Image();
img1.src="pattern1.png";
img1.addEventListener('load', function(e) {
  ctx1.fillStyle = ctx1.createPattern(this, 'repeat') 
  ctx1.fill();
}, true);

将Stacked Canvas保存为图像

0 个答案: