HTML5 Canvas

-- HTML5 2015. 7. 1. 10:13
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

What isHTML Canvas?


The HTML <canvas> element is usedto draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only acontainer for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawingpaths, boxes, circles, text, and adding images.

 

 

기본 형태는 canvas태그으로 캔버스를 만들고 자바스크립트로 생성한 캔버스 안에 그래픽을 그리는 형태이다.

 

<canvas id="canvas1" width="400"height="300">

Your browser does not support the HTML5 canvas tag.

</canvas>

 

BrowserSupport


IE : 9.0, CR : 4.0, FF : 2.0, SF : 3.1,OP : 9.0, IPhone : 1.0, Android: 1.0

 

IE8.0 이하에서 canvas를 이용하기 위해서는 오픈소스 자바스크립트라이브러리인 ExplorerCanvas 사용할 있다.

 

http://code.google.com/p/explorercanvas/

 

<html>
<head>
 <!--[if IE]><scripttype="text/javascript"src="excanvas.js"></script><![endif]-->
  ...

 

자세한 예제와 문법을 제공하는 아래의 사이트를 참고하기 바란다.

http://www.html5canvastutorials.com/

http://cheatsheetworld.com/programming/html5-canvas-cheat-sheet/

 

 

참고) http://www.w3schools.com/html/html5_canvas.asp

참고) http://m.mkexdev.net/62

'-- HTML5' 카테고리의 다른 글

Semantic HTML5 Page Layout  (0) 2012.09.06
HTML5 Web Socket  (0) 2012.07.30
HTML5 Server-Sent Events  (0) 2012.07.18
HTML5 Web Storage, Web SQL Database  (0) 2012.07.18
HTML5 autofocus, required  (0) 2012.07.18
posted by 어린왕자악꿍