8. HTML5 Canvas [bezierCurveTo, cloud_shape]
boolean's Canvas Hello Canvas!! How to use bezierCurveTo, cloud_shape 베지에르곡선 완전 해부 소스보기해서 주석을 읽어보자 [SOURCE VIEW] If you can see this, I'm sorry. You need to get Google Chrome browser to see HTNL5 Canvas If you can see this, I'm sorry. You need to get Google Chrome browser to see HTNL5 Canvas context.moveTo(170,80); //구름 시작점 context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurve..
2015. 3. 26.
7. HTML5 Canvas [drawimage, xPos, yPos]
boolean's Canvas Hello Canvas!! How to use drawimage, xPos, yPos 소스보기해서 주석을 읽어보자 [SOURCE VIEW] 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 복사 확대 축..
2015. 3. 25.
6. HTML5 Canvas [translate, rotate, scale, save, restore]
boolean's Canvas Hello Canvas!! How to use translate, rotate, scale, save, restore 소스보기해서 주석을 읽어보자 [SOURCE VIEW] 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.fillTex..
2015. 3. 25.