고정 헤더 영역
상세 컨텐츠
본문
그리기를 더욱 매력적으로 만들 수 있는 캔버스 옵션을 살펴볼 차례이다.
다른 색상, 선 스타일, 그라디언트, 패턴, 그림자 등을 추가할 수 있다.
도형변수.fillStyle = color
-> 도형을 채우는 색을 설정도형변수.strokeStyle = color
-> 도형의 윤곽선 색을 설정
fillStyle 예시
ex) 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
Math.floor(255 - 42.5 * j) + ', 0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
storkeStyle 예시
ex) 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="application/javascript">
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
Math.floor(255 - 42.5 * j) + ')';
ctx.beginPath();
ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
ctx.stroke();
}
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
'Programming > Mindchain' 카테고리의 다른 글
| 미니게임 UI 디자인 (0) | 2019.07.24 |
|---|---|
| Google Assistant - Interactive Canvas (인터렉티브 캔버스) (0) | 2019.07.22 |
| canvas API - Path2D objects (0) | 2019.07.22 |
| canvas API - 도형그리기(advanced) (0) | 2019.07.22 |
| canvas API - 도형 그리기(basic) (0) | 2019.07.22 |
댓글 영역