6. HTML5 Canvas [translate, rotate, scale, save, restore]

Hello Canvas!!

How to use translate, rotate, scale, save, restore

소스보기해서 주석을 읽어보자

[SOURCE VIEW]

<!-- JavaScript --> function doFirst1(){ var x = document.getElementById('canvas1'); canvas = x.getContext('2d'); canvas.font="bold 22px Tahoma"; canvas.textAlign="start"; //처음 부터 써라 canvas.fillText("start",10,30); canvas.translate(100,150); // 지금 이후부터 별도의 명령이 있을때까지 x축으로100, y축으로 150 이동한다. canvas.fillText("after translate",0,0); canvas.rotate(60*Math.PI/180); // 지금 이후부터 별도의 명령이 있을때까지 시계방향으로 1radian 회전한다. canvas.fillText("after rotate",0,0); canvas.scale(1.5,4); // 지금 이후부터 별도의 명령이 있을때까지 좌우로1.5배 상하로4배 확장한다. canvas.fillText("after Scale",0,20); } f unction doSecond1(){ var x = document.getElementById('canvas1'); canvas = x.getContext('2d'); canvas.strokeStyle = "red"; //선 Style을 red로 canvas.fillStyle = "blue"; //체우기 Style 을 blue로 canvas.strokeRect(10,10,100,200); //절대경로 x=10,y10 에서 가로130세로50size로 선을 그려라 canvas.fillRect(150,50,100,200); //절대경로 x=150,y50 에서 가로130세로50size로 면을 그려라 canvas.strokeRect(300,10,100,200); //절대경로 x=300,y10 에서 가로130세로50size로 선을 그려라 canvas.fillRect(450,50,100,200); //절대경로 x=450,y50 에서 가로130세로50size로 면을 그려라 canvas.clearRect(350,40,130,50); //절대경로 x=350,y40 에서 가로130세로50 size로 지워라 canvas.clearRect(460,100,30,60); //절대경로 x=460,y100 에서 가로30세로60 size로 지워라 } window.addEventListener("load",doFirst1,false); window.addEventListener("load",doSecond1,false); <!-- HTML5 --> <section id ="main"> <canvas id = "canvas1" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas> </section>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas

[SOURCE VIEW]

<!-- JavaScript --> function doFirst2(){ var x = document.getElementById('canvas2'); canvas = x.getContext('2d'); canvas.font="bold 22px Tahoma"; canvas.textAlign="start"; canvas.fillText("start",10,30); canvas.save(); // 지금 이전까지의 명령은 기본값으로 해제 할때까지 restore함수가 와도 실행한다. canvas.translate(100,150); canvas.fillText("after translate",0,0); canvas.rotate(60*Math.PI/180); canvas.fillText("after rotate",0,0); canvas.scale(1.5,4); canvas.fillText("after Scale",0,20); canvas.restore(); //save 함수 이후의 함수들을 지금부터는 실행시키지 않는다. canvas.fillText("after restoring", 110,30); } window.addEventListener("load",doFirst2,false); <!-- HTML5 --> <canvas id = "canvas2" width = "600" height = "400" style = "border:1px solid #000000"> If you can see this, I'm sorry. <br /> You need to get <a href = "https://www.google.com/chrome/browser/desktop/index.html"> Google Chrome browser</a> to see HTNL5 Canvas </canvas>

If you can see this, I'm sorry.
You need to get Google Chrome browser to see HTNL5 Canvas