분류 전체보기
-
-
-
CANVAS 연습12(이미지 합성)게임/HTML 연습 2018. 6. 29. 14:32
DOCTYPE html> 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 글씨도 이미지로 처리하여 중간에 ctx.globalCompositeOperation = "source-over" 를 써주어야 했다.
-
CANVAS 연습11(색상 변경)게임/HTML 연습 2018. 6. 27. 23:05
DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 30, 100, 100); ctx.fillStyle = "green"; ctx.fillRect(50, 50, 100, 100); //캔버스의 일부분 가져오기 var src1 = ctx.getImageData(0, 0, 100, 100); //캔버스의 일부분을 선택하여 이미지를 가져온다. //context.getImageData(x(x좌표), y(y좌표), width(가로), height(높이)); ctx.putImageData(src1, 200, 50); //..
-
CANVAS 연습10(기울임)게임/HTML 연습 2018. 6. 26. 00:08
DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "yellow"; ctx.strokeStyle = "blue"; ctx.lineWidth = 3; ctx.strokeRect(0, 0, 100, 100); ctx.fillRect(0, 0, 100, 100); ctx.transform(1, 0.2, 0.2, 1, 100, 100); //같은 비율의 사각형을 0.2만큼 수직, 수평 기울이기 한다. //context.transform(s1, sk1, sk2, s2, m1, m2); //s1: 수평으로 확대, sk1:수평으로 기울임, sk2: 수직으로 기울임..
-
CANVAS 연습9(도형 회전)게임/HTML 연습 2018. 6. 25. 22:51
DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //회전시키기 ctx.fillStyle = "yellow"; ctx.strokeStyle = "black"; ctx.lineWidth = 5; ctx.strokeRect(100, 100, 100, 100); ctx.fillRect(100, 100, 100, 100); ctx.rotate(5 * Math.PI / 180); //시계방향으로 5도만큼 사각형을 회전시킨다. ctx.strokeRect(100, 100, 100, 100); ctx.fillRect(100, 100, 100, 100); //5도 회전한 사각형 ctx.rotat..
-
CANVAS 연습8(그림자, 위치 이동, 크기 변형)게임/HTML 연습 2018. 6. 25. 22:47
DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //그림자 그리기 ctx.shadowColor = "rgba(0, 0, 0, 0.4)"; //그림자 색 + 투명도 설정 (투명도는 0.4이다.) ctx.shadowOffsetX = 5; // 그림자의 간격을 x축 방향으로 5만큼 이동 ctx.shadowOffsetY = 5; // 그림자의 간격을 y축 방향으로 5만큼 이동 ctx.shadowBlur = 3; // 그림자의 흐림을 3만큼 적용 (퍼지는 정도) ctx.fillStyle = "purple"; ctx.fillRect(50, 50, 100, 100); //위치 이동 ctx...
-
CANVAS 연습7(글씨 정렬)게임/HTML 연습 2018. 6. 25. 18:18
DOCTYPE html> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //좌우정렬 ctx.fillStyle = "#6495ED"; ctx.font = "italic bold 30px Arial, sans-serif"; ctx.textAlign = "start"; //글씨의 시작점을 기준으로 정렬(기본값) ctx.fillText("으아아아(start)", 400, 50); ctx.textAlign = "end"; //글씨의 끝점을 기준으로 정렬 ctx.fillText("으아아아(end)", 400, 100); ctx.textAlign = "left"; //글씨의 왼쪽을 기준으로 정렬 ctx.fillT..