7. HTML5 Canvas [drawimage, xPos, yPos]

Hello Canvas!!

How to use drawimage, xPos, yPos

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

[SOURCE VIEW]

<!-- JavaScript--> function doFirst1(){ var x = document.getElementById('canvas1'); canvas = x.getContext('2d'); var pic = new Image(); pic.src="/image/sdoor.jpg"; canvas.drawImage(pic, 0, 0); canvas.drawImage(pic, 100, 50,150,80); //축소 image Size canvas.drawImage(pic, 300, 90, 100, 50, 30, 280, 150, 100);//image 복사 확대 축소 image Crop canvas.rotate(0.2); canvas.clearRect(470, -60, 120, 40); canvas.restore(); canvas.rotate(-0.4); canvas.clearRect(250, 100, 120, 30); } window.addEventListener("load",doFirst1,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

clearRect로 건물 이름을 감추었으며 rotate로 회전시켜 글 간판 각도와 마추었다.

창문부분을 확대하여 확인해 보았다.

[SOURCE VIEW]

<!-- JavaScript--> function doFirst2(){ var x = document.getElementById('canvas2'); canvas = x.getContext('2d'); window.addEventListener("mousemove",mymove,false); } function mymove(e) { //canvas.clearRect(0,0,600,400); //주석을 해제하면 그림을 못그려... var xPos = e.clientX; var yPos = (e.clientY - 350); canvas.fillRect(xPos,yPos,50,50); } window.addEventListener("load",doFirst2,false); <!-- HTML5 --> <section id ="main"> <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> </section>

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