HTML5 - canvas

Canvas

HTML5에서 <Canvas>는 색깔을 그릴때 사용된다.
<Canvas>는 스크립트(자바스크립트)를 사용해서 표현된다.

 

■ Canvas 만드는 법

 

■ 자바스크립트를 사용하여 canvas 에 그리는 방법

소스설명

//myCanvas락 객체를 찾아 c란 변수에 할당 
var c=document.getElementById("myCanvas");  

// 컨텍스트 오브제트 생성 
var ctx=c.getContext("2d");    

//생성된 객체의 색상지정 
ctx.fillStyle="#FF0000"; 

//객체의 모양 지정  - 아래는 0,0을 기준으로 150*75인 사각형을 생성  
ctx.fillRect(0,0,150,75);

실행화면

다른 예제들

선그리기

실행화면

 

원그리기

실행화면

 

그라디언트

실행화면

 

이미지 표현

실행화면

티스토리에서는 이미지 실행화면이 안도네요.

참고: 운영사이트 트래픽 초과 때문에 복제페이지를 티스토리에 만드는 중입니다.
수작업으로 옮기니까 힘듭니다.
복제 페이지좀더 쉽게 구성할 수 있는 노하우 아는분 조언 부탁합니다.
출처 :http://ggachi.ncity.net/4914