쿨다운 이펙트를 그리기전에 background 이미지 위에 원을 그려본다.
1. css에서 background 이미지를 지정한다.
2. html에서 div 대신 canvas로 이미지를 지정한다.
3. 자바스크립트를 이용하여 그린다.
css
background 이미지로 "grass.jpg" 이미지를 설정한다.
#myCanvas {
position: absolute;
left: 500px;
top: 500px;
width: 200px;
height: 200px;
background:url('grass.jpg') no-repeat;
background-size: 100% 100%;
}
position: absolute;
left: 500px;
top: 500px;
width: 200px;
height: 200px;
background:url('grass.jpg') no-repeat;
background-size: 100% 100%;
}
html
div 대신 canvas로 설정하면 캔버스에 그릴수 있다.
<canvas id="myCanvas" width='200px'
height='200px'></canvas>
javascript
var canvas =
document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
context.beginPath();
//context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 원을 그리다.
context.arc(centerX, centerY, radius, 0, 1 * Math.PI, false);
context.fillStyle = 'rgba(200,100,100,0.5)'
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#003300';
context.stroke();
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;
context.beginPath();
//context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 원을 그리다.
context.arc(centerX, centerY, radius, 0, 1 * Math.PI, false);
context.fillStyle = 'rgba(200,100,100,0.5)'
context.fill();
context.lineWidth = 10;
context.strokeStyle = '#003300';
context.stroke();
arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x, y)를 중점으로 반지름 r을 가진다. startAngle 에서 시작하여, endAngle 에서 끝난다
anticlockwise 방향으로 향하는 (기본값은 시계방향(clockwise)회전) 아치를 그린다.
데모: test01.html
참고)
https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes