<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=320, user-scalable=yes" />
<title>Canvas Test</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script type="text/javascript">
// 캔버스 객체 취득
var canvas = document.getElementById("myCanvas");
// 이미지 컨텍스트 취득
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#ff0000";
ctx.strokeRect(5, 5, 260, 260);
ctx.stroke();
var image = new Image();
image.src = "P3150115.JPG";
image.onload = function() {
ctx.drawImage(image, 10, 10, 250, 250);
};
</script>
</body>
</html>
'html5' 카테고리의 다른 글
| LocalStorage (0) | 2013.02.26 |
|---|---|
| canvas #10 화상 Image 그리기(이미지 잘라내서 크기조절해서 붙이기) (0) | 2013.02.22 |
| canvas #7 베지어 곡선 그리기 (0) | 2013.02.21 |
| canvas #6 원뿔 그리기 (0) | 2013.02.21 |
| canvas #5 랜덤하게 그리기 (0) | 2013.02.21 |