googleAdsense_widever


HTML5 canvas :: rectangle, insert image HTML/JavaScript

사각형 그리기

* strokeRect(startX, startY, width, height)
parameter 기준으로 사각형의 윤곽을 그린다.

* fillRect(startX, startY, width, height)
색을 채운 사각형을 그린다.
default color : black

* clearRect(startX, startY, width, height)
지정된 사각형 영역을 지운다.
ex) context.clearRect(0,0,canvas.width, canvas.height) : canvas 영역 전체를 지움.


이미지 삽입

* drawImage(image, pointX, pointY)
image를 (pointX, pointY) 를 시작점(좌상단)으로 하여, 원래의 크기 그대로 삽입한다.

* drawImage(image, x, y, w, h)
parameter로 정한 크기 (w, h) 대로 이미지 삽입.

* drawImage(image, cutX, cutY, cutW, cutH, x, y, w, h)
원본 이미지로부터 일부분(cutX, cutY, cutW, cutH)을 잘라내어 정해진 위치와 크기(x,y,w,h)로 삽입한다.


caution : image가 load 되기 이전에  drawImage가 호출되어서는 안된다.
아래와 같이 load eventhandler에 drawImage를 연결시켜주는게 옳다.

<!DOCTYPE html>
<head>
<title>*just canvas*</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>
<canvas id="canvas1" width="300" height="200">
</canvas>

<script type="text/javascript">
var canvas = document.getElementById('canvas1'); //select DOM object
var context = canvas.getContext("2d"); //create draw context

var image = new Image();
image.onload = function() {
context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

image.src = "image.jpg";
</script>

</body>
</html>





덧글

댓글 입력 영역


공지

어서오십시오.
트위터 : @FCliver
기저심리학 : 네이버카페
카카오톡 : FCliver
페이스북 : Fredric Cliver

통계 위젯 (화이트)

1911
111
283833

접속자 위치