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.
4. HTML5 Canvas [stroke,fill, clear, gradient]
boolean's Canvas Hello Canvas! How to use stroke, fill, clear [SOURCE VIEW] function doFirst1() { 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세로5..
2015. 3. 25.