HTML5 캔버스 | 패턴 픽셀 색상을 기반으로 오버레이 된 라인 아트를 표시하는 패턴

캔버스 요소를 통해 하나의 색상 (검은 색) 비트 맵 이미지 (라인 아트)를 2 색 (빨간색 및 노란색) 비트 맵 이미지 (패턴)에 적용하고 그 패턴의 빨간 픽셀들만 오버레이 된 라인 아트에 의해 색칠됩니다, 마치 교차와 같습니다. 나는 이것을 보았습니다 : https://developer.mozilla.org/en/docs/Web/Guide/HTML/Canvas_tutorial/Compositing (globalCompositeOperation> Darker method 참조) 그 효과가 필요한지 궁금했습니다. 이 방법은 더 이상 지원되지 않는 것으로 보이므로 이러한 효과를 시뮬레이션 할 수있는 방법이 있습니까? 이 용도로 사용되는 모든 이미지에는 별색 (빨간색 100 %, 노란색 100 %, 검정 100 %, 흰색 100 %) 만 포함됩니다. 모든 자바 스크립트 코드 샘플이나 해결책을 제시하는 힌트가 굉장합니다. 입력을위한 Thx.HTML5 캔버스 | 패턴 픽셀 색상을 기반으로 오버레이 된 라인 아트를 표시하는 패턴

출처

2014-09-13 koolness

빨간색 부분 만 별도의 이미지로 분리 할 수 있다면 합성을 사용하여 검정색이 빨간색으로 교차하는 부분을 다시 칠할 수 있습니다.

그렇지 않으면 두 이미지의 모든 픽셀 색상을 context.getImageData을 사용하여 가져올 수 있습니다.

그런 다음 빨간색 & 검정색이 교차하는 빨간색 픽셀을 검정색으로 변경할 수 있습니다.

enter image description here

예제 코드와 데모 : http://jsfiddle.net/m1erickson/pcsmbr22/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; margin:20px; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var canvasB=document.getElementById("black"); 
    var ctxB=canvasB.getContext("2d"); 
    var canvasC=document.getElementById("color2"); 
    var ctxC=canvasC.getContext("2d"); 

    ctxB.fillRect(50,50,50,100); 
    ctxC.fillStyle='yellow'; 
    ctxC.fillRect(75,50,50,50); 
    ctxC.fillStyle='red'; 
    ctxC.fillRect(75,100,50,50); 

    var iDataB=ctxB.getImageData(0,0,canvasB.width,canvasB.height); 
    var dataB=iDataB.data; 
    var iDataC=ctxC.getImageData(0,0,canvasC.width,canvasC.height); 
    var dataC=iDataC.data; 

    // copy yellow-red onto results canvas 
    ctx.drawImage(canvasC,0,0); 

    var iData=ctx.getImageData(0,0,canvas.width,canvas.height); 
    var data=iData.data; 

    // copy black pixels when intersecting red pixels 
    for(var i=0;i<dataC.length;i+=4){ 
     var isBlack=(dataB[i]==0 && dataB[i+1]==0 && dataB[i+2]==0 && dataB[i+3]==255); 
     var isRed=(dataC[i]==255 && dataC[i+1]==0 && dataC[i+2]==0 && dataC[i+3]==255); 
     if(isBlack && isRed){ 
      data[i]=0; 
      data[i+1]=0; 
      data[i+2]=0; 
      data[i+3]=255; 
     } 
    } 
    ctx.putImageData(iData,0,0); 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="black" width=200 height=200></canvas> 
    <canvas id="color2" width=200 height=200></canvas> 
    <canvas id="canvas" width=200 height=200></canvas> 
</body> 
</html>

출처

2014-09-13 20:33:55 markE

니스! 또한 색상의 음영을 포함하는 픽셀에 적용되는 유사한 이상을 생성하는 코드를 발견했습니다. http : //jsfiddle.net/26N7S/3/ – koolness

HTML5 캔버스 | 패턴 픽셀 색상을 기반으로 오버레이 된 라인 아트를 표시하는 패턴

답변

관련 문제