Canvas는 포토샵의 Layer개념으로 봐도 된다.
<style type='text/css'> .gamelayer { position: absoulte; top : 0px; left : 0px; } </style> <script src='http://code.jquery.com/jquery-latest.js'></script> <script> $(document).ready(function() { var canvas = $('#mycanvas')[0]; var ctx = canvas.getContext('2d'); // 무지개 만들기 //fillRect(x좌표, y좌표, 가로크기, 세로크기) ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 50, 100); ctx.fillStyle = 'rgb(255,100,0)'; ctx.fillRect(50, 0, 50, 100); ctx.fillStyle = 'rgb(255,255,0)'; ctx.fillRect(100, 0, 50, 100); ctx.fillStyle = 'rgb(0,255,0)'; ctx.fillRect(150, 0, 50, 100); ctx.fillStyle = 'rgb(0,255,0)'; ctx.fillRect(150, 0, 50, 100); ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(200, 0, 50, 100); ctx.fillStyle = 'rgb(0,0,100)'; ctx.fillRect(250, 0, 50, 100); ctx.fillStyle = 'rgb(255,0,255)'; ctx.fillRect(300, 0, 50, 100); //아래 정의된 캔버스의 크기를 오버할 경우 짤린다. //2번 레이어 흰색 반투명 var canvas = $('#mycanvas2')[0].getContext('2d'); // 마지막 값은 알파값 0.5 = 50% ctx.fillStyle = 'rgba(200,200,200, 0.5)'; ctx.fillRect(0, 0, 150, 150); }) </script> </head> <body> <canvas id='mycanvas' width='350' height='460'></canvas> <canvas id='mycanvas2' class='gamelayer' width='350' height='460'></canvas>
[결과]
'IT 관련 > Html5' 카테고리의 다른 글
| 자주 사용하는 명령어 (0) | 2015.10.28 |
|---|---|
| JQuery로 별과 도표 만들기 (0) | 2011.11.03 |
| 웹사이트 소스 가져오기 (JSON, Ajax) (0) | 2011.10.28 |
| JSon을 이용한 플리커 이미지 가져오기 (0) | 2011.10.28 |
| JQTouch 활용2 (0) | 2011.10.15 |