반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
//캔버스에 그리기를 수행할 컨텍스트 가져오기
var context = canvas.getContext("2d");
//context.fillRect(0,0,300,100);
context.beginPath();
context.moveTo(200,0);
context.lineTo(400,400);
context.lineTo(0,400);
context.lineTo(400,200);
context.clip();
//캔버스 전체 영역에 이미지를 출력
var img = new lmage();
img.src="https://t1.daumcdn.net/cfile/tistory/132A563E4FFDC4802C";
img.onload = function(){
context.drawlmage(img,0,0,
canvas.width,canvas.heigth);
}
};
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"> </canvas>
</body>
</html>
'Web개발 > JSP, Web' 카테고리의 다른 글
| [Ajax] ajax json 파싱 (0) | 2014.11.18 |
|---|---|
| [javascript] 캔버스 트랜스 폼 (0) | 2014.11.18 |
| [Ajax] Ajax xml 파싱 (0) | 2014.11.18 |
| [JSP] javaseript 사용하기4 (0) | 2014.11.18 |
| [JSP] javaseript 사용하기3 (0) | 2014.11.18 |