Javascript HTML画布“；“来源”；仅绘制先前绘制的形状的步骤_Javascript_Canvas_Html5 Canvas

Javascript HTML画布“；“来源”；仅绘制先前绘制的形状的步骤

javascript canvas html5-canvas

Javascript HTML画布“；“来源”；仅绘制先前绘制的形状的步骤,javascript,canvas,html5-canvas,Javascript,Canvas,Html5 Canvas,我不知道如何让画布“source Top”只在先前绘制的形状中绘制后续图形，而不是在先前绘制的“all”形状中绘制。像这样的代码。它绘制一个“阴影”矩形，然后绘制一个矩形作为“对象”，然后在顶部绘制源，然后我希望下一个绘制的矩形被剪裁在先前绘制的矩形（“对象”）内，但它在“阴影”内剪裁。谢谢 HTML 源代码覆盖是默认的comp操作，总是在现有的像素上绘制像素。您需要在上方使用源代码，在上方使用目标代码此外，在使用comp操作时，渲染顺序不再从前向后。在这种情况下，阴影最后绘制。如果先绘制，则

我不知道如何让画布“source Top”只在先前绘制的形状中绘制后续图形，而不是在先前绘制的“all”形状中绘制。像这样的代码。它绘制一个“阴影”矩形，然后绘制一个矩形作为“对象”，然后在顶部绘制源，然后我希望下一个绘制的矩形被剪裁在先前绘制的矩形（“对象”）内，但它在“阴影”内剪裁。谢谢

HTML

源代码覆盖

是默认的comp操作，总是在现有的像素上绘制像素。您需要在上方使用

源代码，在

上方使用

目标代码
此外，在使用comp操作时，渲染顺序不再从前向后。在这种情况下，阴影最后绘制。如果先绘制，则会干扰源操作
下面是一种方法。但是我建议您使用ctx.clip（）
，因为这个例子更适合ctx.clip（）
，因为形状很简单。仅在图像非常复杂且需要对剪裁进行逐像素控制的情况下使用comps

var canvas=document.getElementById（“canV”）；
var ctx=canvas.getContext（“2d”）；
//画圈
函数画圈（x，y）{
ctx.beginPath（）；
弧（x，y，150，0，数学π*2）；
ctx.fill（）；
}
ctx.clearRect（0,0，canvas.width，canvas.height）；//确保画布清晰
ctx.globalCompositeOperation=“源代码结束”//正常绘制青色圆
ctx.fillStyle=“#3AE”；
drawCircle（200200）；//画主圆
ctx.globalCompositeOperation=“source”；//从源中绘制新像素
//任何现有像素的ontop
//而不是那些没有像素的地方
ctx.fillStyle=“#F70”；
画圈（300300）；//画出裁剪过的圆；
ctx.globalCompositeOperation=“目的地结束”//画阴影。
//目标中的像素在哪里
//待在上面。
ctx.fillStyle=“#888”；
绘图圈（210210）；//画出阴影
#canV{
宽度：500px；
高度：500px；
}
合成会影响所有现有像素和所有新像素，因此不能“分层”仅影响（或不影响）最近存在的像素。如果要将合成分层，则需要在第二个画布（可能在内存中）上进行分层，然后drawImage内存画布到主画布。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="theCanvas" width="500" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript" src="externalJS.js"></script>
</body>
</html>

window.addEventListener("load", eventWindowLoaded, false);

function eventWindowLoaded () {
    canvasApp();
}
function canvasApp() {
    var canvas = document.getElementById('theCanvas');
    var context = canvas.getContext('2d');
    context.fillStyle = '#999999';// this rectangle is supposed to be the "shadow"
    context.fillRect(42, 42, 350, 150);
    context.fillStyle = '#dddddd';// this rectangle is supposed to be on top..."
    context.fillRect(35, 35, 350, 150);

    context.globalCompositeOperation="source-atop";

    context.fillStyle = '#00ff00';
    context.fillRect(100, 100, 350, 150);//... and then this rectangle is supposed to be clipped inside the previously 

drawn one... not the shadow one
}