[Canvas] 연습
웹 & 안드로이드/HTML52014. 6. 2. 23:21
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 |
<script type="text/javascript">
var maxX = 500; maxY = 500;
var centerX = maxX/2, centerY = maxY/2;
var x = 0, y = 0;
var drawX = function(xx){
return (xx || x) + centerX;
};
var drawY = function(yy){
return (-yy || -y) + centerY;
}
window.onload = function(){
c = getCanvasContext(maxX, maxY);
drawLine(0, centerY, maxX, centerY);
drawLine(centerX, 0, centerX, maxY);
x = 10;
y = 20;
drawLine(centerX, centerY, drawX(), drawY());
drawText(drawX(), drawY(), x + ", " + y);
x = -100;
y = -50;
drawLine(centerX, centerY, drawX(), drawY());
drawText(drawX(), drawY(), x + ", " + y, 20);
c.stroke();
}
function getCanvasContext(x, y){
var cv = document.getElementById("myCanvas");
cv.setAttribute("width", x);
cv.setAttribute("height", y);
return cv.getContext("2d");
}
function drawLine(startX, startY, endX, endY){
c.moveTo(startX, startY);
c.lineTo(endX, endY);
}
function drawText(x, y, text, fontSize){
c.font = (fontSize || 10)+"px Arial";
c.fillText(text, x, y);
}
</script>
<canvas id="myCanvas" style="border:1px solid #000000;">
</canvas> |
결과물
'웹 & 안드로이드 > HTML5' 카테고리의 다른 글
| label 태그를 이용하여 폼 컨트롤 다루기. (0) | 2014.06.09 |
|---|---|
| [Canvas] canvas를 이용한 좌표계 그리기 (0) | 2014.06.03 |
| [Javascript] let - 변수 스코프를 조절하는 키워드. (0) | 2014.05.29 |
| [에러].submit() is not function - form 객체 submit()이 안될 때 (1) | 2014.05.18 |
| [Javascript] querySelector (0) | 2014.05.18 |
댓글()
