1. Advanced #1

2. 그림자 스타일

3. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.rect(188, 40, 200, 100); context.fillStyle = "#8ED6FF"; context.shadowColor = “black"; context.shadowBlur = 10; context.shadowOffsetX = 15; context.shadowOffsetY = 15; context.fill(); }; 소스 파일 소스 파일

4. 그림자 스타일 지정하기 – 그림자스타일을 지정하는 데는 4 가지 속성이 사용됨

5. 그림자 스타일 지정하기

6. 01: 02: 03: 04: 05: 그림자 스타일 지정하기 06: 07: function shadow() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: context.beginPath(); 13: context.shadowOffsetX = 10; 14: context.shadowOffsetY = 10; 15: context.shadowColor = 'gray'; 16: context.shadowBlur = 1; 17: context.fillRect(50,50,100,250); 18: 19: context.beginPath(); 20: context.shadowOffsetX = 10; 21: context.shadowOffsetY = 30; 22: context.shadowColor = 'blue'; 23: context.shadowBlur = 2; 24: context.fillRect(250,50,100,250); 25: 26: context.beginPath(); 27: context.shadowOffsetX = 30; 28: context.shadowOffsetY = 10; 29: context.shadowColor = 'green'; 30: context.shadowBlur = 3; 31: context.fillRect(450,50,100,250); 32: } 33: 34: 35: 36: 37: <canvas id="canvas" width="700" height="400" 38: style="border:solid 1px #000000"> 39: canvas 사용하기 40: 41: 42:

8. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.rect(200, 20, 100, 100); context.fillStyle = "blue"; context.fill(); context.globalAlpha = 0.5; // set global alpha context.beginPath(); context.arc(320, 120, 60, 0, 2 * Math.PI, false); context.fillStyle = "red"; context.fill(); }; 소스 파일 소스 파일

9. 도형 합성하기 –globalCompositeOperation 속성의 값을 지정함 으로써 도형을 그린 순서와 상관없이 겹쳐지는 부분에 대한 처리

12. 01: 02: 03: 04: 05: 도형 합성하기 06: 07: function xor() 08: { 09: var canvas = document.getElementById('canvas'); 10: context = canvas.getContext('2d'); 11: 12: for (var i=0; i<50; i++) 13: { 14: var arcstyle = context.createRadialGradient(i*8,i*8,0,i*5,i*5,3 00); 15: arcstyle.addColorStop(0,"orange"); 16: arcstyle.addColorStop(1,"green"); 17: context.fillStyle = arcstyle; 18: 19: context.arc(i*10,i*10,50,0,2*Math.PI,true); 20: context.fill(); 21: 22: context.globalCompositeOperation = "xor" 23: } 24: } 25: 26: 27: 28: 29: <canvas id="canvas" width="500" height="500" 30: style="border:solid 1px #000000"> 31: canvas 사용하기 32: 33: 34:

13. window.onload = function(){ var squareWidth = 55; var circleRadius = 35; var rectCircleDistX = 50; var rectCircleDistY = 50; var operationArray = new Array(); operationArray.push("source-atop"); operationArray.push("source-in"); // 0, 1 operationArray.push("source-out"); operationArray.push("source-over"); // 2, 3 operationArray.push("destination-atop"); operationArray.push("destination-in"); // 4, 5 operationArray.push("destination-out"); operationArray.push("destination-over"); // 6, 7 operationArray.push("lighter"); operationArray.push("xor"); // 8, 9 operationArray.push("copy"); // 10 // draw each of the eleven operations for (var n = 0; n < operationArray.length; n++) { var thisOperation = operationArray[n]; var canvas = document.getElementById(thisOperation); var context = canvas.getContext("2d"); var rectX = 10; // draw rectangle context.beginPath(); context.rect(rectX, 0, squareWidth, squareWidth); context.fillStyle = "blue"; context.fill(); context.globalCompositeOperation = thisOperation; // draw circle context.beginPath(); context.arc(rectX + rectCircleDistX, rectCircleDistY, circleRadius, 0, 2 * Math.PI, false); context.fillStyle = "red"; context.fill(); } }; 소스 파일 소스 파일

14. 기준점

15. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; for(var i=0;i<10;i++){ context.translate(i*10,0); context.fillStyle=randomColor(); context.fillRect(0,0,200,200); } }; function randomColor(){ var r=Math.round(Math.random()*255); var g=Math.round(Math.random()*255); var b=Math.round(Math.random()*255); return "rgb("+r+","+g+","+b+")"; }; 소스 파일 소스 파일

16. 기준점

17. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.save(); context.scale(2,2); context.fillStyle=randomColor(); context.fillRect(10,10,100,100); context.restore(); context.fillStyle=randomColor(); context.fillRect(10,10,100,100); }; function randomColor(){ var r=Math.round(Math.random()*255); var g=Math.round(Math.random()*255); var b=Math.round(Math.random()*255); return "rgb("+r+","+g+","+b+")"; }; 소스 파일 소스 파일

18. 기준점

19. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.translate(200,200); // 기준점 옮김, default = (0,0) for(var i=0;i<20;i++){ context.rotate(Math.PI*0.1); context.fillStyle=randomColor(); context.fillRect(10,10,100,100); } }; function randomColor(){ var r=Math.round(Math.random()*255); var g=Math.round(Math.random()*255); var b=Math.round(Math.random()*255); return "rgb("+r+","+g+","+b+")"; }; 소스 파일 소스 파일

20. context.transform(a,b,c,d,e,f); // 기준점 (0,0) // 옮김 기준점

21. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; // translation matrix: 단위행렬 (1,0,0,1,0,0) // 1 0 tx // 0 1 ty x’=x+tx, y’=y+ty // 0 0 1 var tx = canvas.width / 2; var ty = canvas.height / 2; // 기준점을 canvas 중간으로 옮김 context.transform(1, 0, 0, 1, tx, ty); // apply custom transform context.fillStyle = "blue"; // 단위행렬 (1,0,0,1,tx,ty) 값 설정 context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); }; 소스 파일 소스 파일

22. context.transform(1,sy,sx,1,0,0); 기준점

23. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; // shear matrix: // 1 sx 0 // sy 1 0 // 0 0 1 var sx = 0.75; //.75 horizontal shear var sy = 0; // no vertical shear // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); context.transform(1, sy, sx, 1, 0, 0); context.fillStyle = "blue"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); }; 소스 파일 소스 파일

24. // mirror horizontally context.scale(-1,1); // mirror vertically context.scale(1,-1); 기준점

25. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // flip context horizontally context.scale(-1, 1); context.font = "30pt Calibri"; context.textAlign = “left"; context.fillStyle = "blue"; context.fillText("Hello World!", 0, 0); }; 소스 파일 소스 파일

26. context.setTransform(1,0,0,1,0,0);

27. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); context.fillStyle = "blue"; context.fillRect(-rectWidth/2, -rectHeight/2, rectWidth, rectHeight); // Reset Transform – 기준점을 원위치 시킴 context.setTransform(1, 0, 0, 1, 0, 0); context.fillStyle = "red"; context.fillRect(0, 0, rectWidth, rectHeight); }; 소스 파일 소스 파일

28. context.save(); // push in a stack context.restore();// pop in a stack

29. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var rectWidth = 150; var rectHeight = 75; context.save(); // save state 1 context.translate(canvas.width / 2, canvas.height / 2); context.save(); // save state 2 context.rotate(Math.PI / 4); context.save(); // save state 3 context.scale(2, 2); context.fillStyle = "blue"; context.fillRect(-rectWidth / 2, - rectHeight / 2, rectWidth, rectHeight); context.restore(); // restore state 3 context.fillStyle = "red"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); context.restore(); // restore state 2 context.fillStyle = "yellow"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); context.restore(); // restore state 1 context.fillStyle = "green"; context.fillRect(-rectWidth / 2, -rectHeight / 2, rectWidth, rectHeight); }; 소스 파일 소스 파일

30. context.scale(2, 1);

31. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.save(); // save state var centerX = 0; var centerY = 0; var radius = 50; context.translate(canvas.width / 2, canvas.height / 2); context.scale(2, 1); context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.restore(); // restore to original state context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); }; 소스 파일 소스 파일

32. window.onload = function(){ var imageObj = new Image(); imageObj.onload = function(){ drawImage(this); }; imageObj.src = "darth-vader.jpg"; }; function drawImage(imageObj){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var destX = 69; var destY = 50; context.drawImage(imageObj, destX, destY); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; // manipulate data 다음 쪽에서 자세히 설명 … context.putImageData(imageData, 0, 0); }; 이미지 파일과 소스 파일이 동 일한 호스트의 서버상에 위치해 있어야만 결과를 확인할 수 있 다.

33. for (var i = 0; i < data.length; i += 4) { var red = data[i]; // red var green = data[i + 1]; // green var blue = data[i + 2]; // blue // i+3 is alpha (the fourth element) } // or iterate over all pixels based on x and y coordinates // like this for (var y = 0; y < sourceHeight; y++) { // loop through each column for (var x = 0; x < sourceWidth; x++) { var red = data[((sourceWidth * y) + x) * 4]; var green = data[((sourceWidth * y) + x) * 4 + 1]; var blue = data[((sourceWidth * y) + x) * 4 + 2]; } }

35. var destX = 69; var destY = 50; context.drawImage(imageObj, destX, destY); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; // Image pixel 처리 - 반대로 for (var i = 0; i < data.length; i += 4) { data[i] = 255 - data[i]; // red data[i + 1] = 255 - data[i + 1]; // green data[i + 2] = 255 - data[i + 2]; // blue // i+3 is alpha (the fourth element) } // overwrite original image context.putImageData(imageData, 200, 200);

37. var destX = 69; var destY = 50; context.drawImage(imageObj, destX, destY); var imageData = context.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; for (var i = 0; i < data.length; i += 4) { var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; data[i] = brightness; // red data[i + 1] = brightness; // green data[i + 2] = brightness; // blue // i+3 is alpha (the fourth element) } // overwrite original image context.putImageData(imageData, 200, 200);

39. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // draw /* context.beginPath(); 1.3.3 Bezier Curve 구름 무늬 그리는 부분 생략 */ // save canvas image as data url (png format by default) var dataURL = canvas.toDataURL(); // alert alert(canvas.toDataURL().toString()); }; 외부 도메인에 저장된 이미지가 포함된 캔버스에서는 에러가 발 생한다. 소스 파일 소스 파일

41. function loadCanvas(dataURL){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // load image from data url var imageObj = new Image(); imageObj.onload = function(){ context.drawImage(this, 0, 0); }; imageObj.src = dataURL; } window.onload = function(){ // make ajax call to get image data url var request = new XMLHttpRequest(); request.open("GET", "dataURL.txt", true); request.onreadystatechange = function(){ if (request.readyState == 4) { // Makes sure the document is ready to parse. if (request.status == 200) { // Makes sure it's found the file. loadCanvas(request.responseText); } } }; request.send(null); };

42. 도형 이미지

43. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // draw cloud // context.beginPath(); // 1.3.3 Bezier Curve 구름 무늬 그리는 부분 생략 // save canvas image as data url (png format by default) var dataURL = canvas.toDataURL(); // set canvasImg image src to dataURL // so it can be saved as an image document.getElementById("canvasImg").src = dataURL; }; 소스 파일 소스 파일