关于如何使画布绘图不在另一个之上的任何见解？ [复制]

Posted 2023-03-05

技术标签:

【中文标题】关于如何使画布绘图不在另一个之上的任何见解？ [复制]【英文标题】：Any insights on how to make a canvas drawing not go on top on the other? [duplicate] 【发布时间】：2013-12-17 12:41:26 【问题描述】：

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

【问题讨论】：

【参考方案1】：

三种方式（至少）：

您可以剪裁画布：只会绘制未剪裁的部分。

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

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

sn-p：

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) 的 source-over 和黑色的 fillRect）。

另一种选择是使用临时画布进行绘图。这很容易，特别是如果您制作小的辅助函数。

函数 createCanvas(w,h) var cv = document.createElement('canvas'); 简历宽度； cv.height = 身高；返回简历;

(如果你有兴趣，你可以看看我的小库，以简化使用画布的工作： https://github.com/gamealchemist/CanvasLib/blob/master/canvasLib.js)

【讨论】：

【参考方案2】：

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

编辑：

检查这个：canvas layers