HTML Canvas «source-atop» для рисования только ранее нарисованной фигуры

Не могу понять, как получить холст «source-atop», чтобы нарисовать последующие рисунки внутри ТОЛЬКО ранее нарисованной фигуры, а не «все» ранее формы. Как этот код. Он рисует прямоугольник «тень», затем рисует прямоугольник, чтобы действовать как «объект», затем «источник-поверх», затем я хочу, чтобы следующий рисованный прямоугольник был обрезан внутри ранее нарисованного («объект»), но вместо этого он клипы внутри «тени». Благодарю.HTML Canvas «source-atop» для рисования только ранее нарисованной фигуры

HTML

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

JAVASCRIPT

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 
}

источник

2015-11-22 bobcodenewbie

Compositing влияет на все существующие пикселы против всех новых пикселей, так что вы не можете «слой», чтобы повлиять (или не влияют) только в последнее время существующих пикселей. Если вы хотите сложить свой композитинг, вам нужно будет сделать это на втором холсте (возможно, в памяти), а затем 'drawImage' в холсте в памяти на основной холст. – markE

source over является операция комп по умолчанию и всегда привлекает пикселей над теми, которые существуют. Вам необходимо использовать source-atop и destination-over.

Также при использовании операций comp порядок рендеринга больше не возвращается на передний план. В этом случае тень рисуется последним. Если бы это был первый розыгрыш, это помешало бы операции source-atop.

Ниже приводится один из способов сделать это. Но я бы предположил, что вы используете ctx.clip(), поскольку этот пример лучше подходит для ctx.clip() из-за простоты форм. Используйте comps только для ситуаций, когда у вас очень сложные изображения, и для управления пикселями требуется обрезание.

var canvas = document.getElementById("canV"); 
 
var ctx = canvas.getContext("2d"); 
 

 

 
// draw a circle 
 
function drawCircle(x,y){ 
 
    ctx.beginPath(); 
 
    ctx.arc(x,y,150,0,Math.PI*2); 
 
    ctx.fill(); 
 
} 
 

 
ctx.clearRect(0,0,canvas.width,canvas.height); // ensure a clear canvas 
 
ctx.globalCompositeOperation = "source-over"; // draw the cyan circle normaly 
 
ctx.fillStyle = "#3AE"; 
 
drawCircle(200,200); // draw the main circle 
 

 

 
ctx.globalCompositeOperation = "source-atop"; // draw the new pixels from source 
 
               // ontop of any existing pixels 
 
               // and not where the are no pixels 
 
ctx.fillStyle = "#F70"; 
 
drawCircle(300,300); // draw the clipped circle; 
 

 
ctx.globalCompositeOperation = "destination-over"; // draw the shadow. 
 
                // Where pixels in destination 
 
                // stay ontop. 
 
ctx.fillStyle = "#888"; 
 
drawCircle(210,210); // draw the shadow;

#canV { 
 
    width:500px; 
 
    height:500px; 
 
}

<canvas id = "canV" width=500 height=500></canvas>

источник

2015-11-22 19:49:50 Blindman67

HTML Canvas «source-atop» для рисования только ранее нарисованной фигуры

ответ

Смежные вопросы