-
CANVAS 연습12(이미지 합성)게임/HTML 연습 2018. 6. 29. 14:32반응형<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CANVAS 연습12</title><body><canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
//알파값을 이용하여 투명한 이미지를 기존 이미지 위에 올려서 색상에 간섭하여 그리는 것ctx.fillStyle = "rgba(63, 169, 245, 1)"; //하늘색 지정ctx.fillRect(20, 20, 100, 100);ctx.globalAlpha = 0.5; //파란색 사각형에 알파값 0.5를 부여한다.ctx.fillStyle = "blue";ctx.fillRect(50, 50, 100, 100);</script></body></html>결과:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CANVAS 연습12_1</title></head><body><canvas id="myCanvas0" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas1" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas2" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas3" width="200" height="200" style="border: 1px dotted blue"></canvas><br><canvas id="myCanvas4" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas5" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas6" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas7" width="200" height="200" style="border: 1px dotted blue"></canvas><br><canvas id="myCanvas8" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas9" width="200" height="200" style="border: 1px dotted blue"></canvas><canvas id="myCanvas10" width="200" height="200" style="border: 1px dotted blue"></canvas><script>var gco = ["source-over", "source-atop", "source-in", "source-out", "destination-over", "destination-atop",
"destination-in", "destination-out", "lighter", "copy", "xor"];
for (var i = 0; i < 11;i++){var canvas= document.getElementById("myCanvas" + i);var ctx = canvas.getContext("2d");ctx.fillStyle = "red";ctx.fillRect(30, 20, 100, 100);ctx.globalCompositeOperation = gco[i];ctx.fillStyle = "blue";ctx.fillRect(60, 50, 100, 100);
ctx.globalCompositeOperation = "source-over"ctx.fillStyle = "black";ctx.font = "bold 25px Arial, sans-serif";ctx.fillText( gco[i], 0, 170);}
/*"source-over (default): 이미지 위에 겹쳐 그린다.","source-atop: 첫 번째 이미지를 그리고 두 번째 이미지의 겹치는 부분만 그린다.","source-in: 첫 번째 이미지를 그리지 않고 두 번째 이미지의 겹치는 부분만 그린다.","source-out: 첫 번째 이미지를 그리지 않고 두 번째 이미지의 겹치지 않는 부분만 그린다.","destination-over: 첫 번째 이미지를 위로 올리고 두 번째 이미지의 전체를 그린다.","destination-atop: 첫 번째 이미지를 위로 올리고 두 번째 이미지와 겹치지 않는 부분을 지운다.","destination-in: 첫 번째 이미지를 위에 올리고 두 번째 이미지와 겹치는 부분만 그린다.","destination-out: 첫 번째 이미지를 그리고 두 번째 이미지와 겹치는 부분을 지운다.","lighter: 전체를 그리고 겹친 부분을 가산 혼합한다.","copy: 두 번째 이미지만 남기고 다른 부분은 지운다.","xor: 전체를 그리고 겹친 부분을 지운다."*/</script></body></html>결과:
=> 글씨도 이미지로 처리하여 중간에 ctx.globalCompositeOperation = "source-over" 를 써주어야 했다.
반응형'게임 > HTML 연습' 카테고리의 다른 글
CANVAS 연습13_1(사각형 이동 && 클릭시 멈춤) (0) 2018.06.29 CANVAS 연습13(사각형 이동) (0) 2018.06.29 CANVAS 연습11(색상 변경) (0) 2018.06.27 CANVAS 연습10(기울임) (0) 2018.06.26 CANVAS 연습9(도형 회전) (0) 2018.06.25
