关于如何制作画布的任何见解都没有在另一个上面展开？

Question

这是一个直接的问题和基本问题。我认为，因为那必须是一个经常动作必须有功能，但我找不到它？有吗？如果没有人知道该怎么做？

Answer 1

三种方式（至少）：

• 你可以剪裁你的画布：只画出非剪裁的部分。

剪辑你用beginPath，moveTo，lineTo，arcTo，... arc构建一个路径， （任何路径构建函数）然后你调用clip（）：路径内的部分 是剪辑的部分。

不要忘记保存上下文并在之后恢复它（除非你想要一个永久剪辑）。

摘录：

http://jsbin.com/oSoSugAZ/1/

 var context=document.getElementById('cv').getContext('2d');

 context.fillStyle='#F66';
 context.fillRect(150,150, 500,500); // draw big rect in red 

 context.save();
 context.lineWidth=0; // to have precise clip
 context.beginPath();
 context.moveTo(100,100);
 context.lineTo(200,100);
 context.lineTo(200,200);
 context.lineTo(100,200);
 context.closePath();
 context.clip();
 // here we can only draw within the rect (100,100) (200,200)
 context.fillStyle='#FCE'; // pink
 context.fillRect(150,150, 500,500); // will get clipped
 context.beginPath();
 context.fillStyle = '#AAF';
 context.arc(150,150, 30, 0,6.2);
 context.fill();    // won't get clipped

 // do not forget to restore !
 context.restore();

• 您可以使用globalCompositeOperation选择您绘制的像素与现有像素交互的方式它适用于绘制路径或图像。这里讨论的选择太多了，这完全取决于您的需求。

这里有一个完整的例子：

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

请注意，较暗的颜色不起作用（但无论如何它都没用，只需使用普通模式=不透明度低的光源（0.2）和黑色的fillRect。）

• 另一种选择是使用临时画布进行绘制。 这很容易，特别是如果你做小辅助功能。

  function createCanvas（w，h）{
           var cv = document.createElement（'canvas'）;
          cv.width; cv.height = height;
          返回cv;
     }

（无论如何你都感兴趣，你可以看一下我的小型lib来轻松使用画布： https://github.com/gamealchemist/CanvasLib/blob/master/canvasLib.js）

Answer 2

你做不到。但是，您可以使用具有不同z-index的多个画布元素来模拟图层。

编辑：

请检查：canvas layers