HTML5 에서 사용되는 행렬(Matrix)의 개념을 이해하기 위한 행렬의 저수준 사용 예
테스트 환경: HTML5, Eclipse, Google Chrome
이동행렬의 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>이동행렬을 이용하여 이동변환을 적용한 예</title>
<script type="text/javascript">
var canvas = null;
var ctx = null;
window.onload = function() {
canvas = document.getElementById('MyCanvas');
ctx =canvas.getContext('2d');
drawShape();
}
/* 1 0 tx
* 0 1 ty
* 0 0 1
*/
function drawShape(){
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(0,0,100,100);
ctx.fillStyle = "red";
ctx.transform(1,0,0,1,100,100);
ctx.fillRect(0,0,100,100);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="400" height="300" style="border:1px dotted black;">
HTML5 Canvas를 지원하지 않는 브라우저입니다.
</canvas>
</body>
</html>
회전행열의 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>회전행렬을 이용하여 회전변환을 적용한 예</title>
<script type="text/javascript">
var canvas = null;
var ctx = null;
window.onload = function() {
canvas = document.getElementById('MyCanvas');
ctx =canvas.getContext('2d');
drawShape();
}
/* cos -sin 0
* sin cos 0
* 0 0 1
*/
function drawShape(){
var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(0,0,100,100);
ctx.fillStyle = "red";
ctx.transform(cos,sin,-sin,cos,0,0);
ctx.fillRect(0,0,100,100);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="400" height="300" style="border:1px dotted black;">
HTML5 Canvas를 지원하지 않는 브라우저입니다.
</canvas>
</body>
</html>
축척(Scale)행렬의 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>스케일 행렬을 이용하여 크기(척도) 변환을 적용한 예</title>
<script type="text/javascript">
var canvas = null;
var ctx = null;
window.onload = function() {
canvas = document.getElementById('MyCanvas');
ctx =canvas.getContext('2d');
drawShape();
}
/* sx 0 0
* 0 sy 0
* 0 0 1
*/
function drawShape(){
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(0,0,100,100);
ctx.fillStyle = "red";
ctx.transform(2,0,0,1,100,100);
ctx.fillRect(0,0,100,100);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="400" height="300" style="border:1px dotted black;">
HTML5 Canvas를 지원하지 않는 브라우저입니다.
</canvas>
</body>
</html>
Skew(Shear) 변환행렬의 예
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>스큐(Skew, Shear) 행렬을 이용하여 유사변환을 적용한 예</title>
<script type="text/javascript">
var canvas = null;
var ctx = null;
window.onload = function() {
canvas = document.getElementById('MyCanvas');
ctx =canvas.getContext('2d');
drawShape();
}
/* 1 sx 0
* sy 1 0
* 0 0 1
*/
function drawShape(){
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(0,0,100,100);
ctx.fillStyle = "red";
ctx.transform(1,0,1,1,100,100);
ctx.fillRect(0,0,100,100);
ctx.stroke();
}
</script>
</head>
<body>
<canvas id="MyCanvas" width="400" height="300" style="border:1px dotted black;">
HTML5 Canvas를 지원하지 않는 브라우저입니다.
</canvas>
</body>
</html>