나는 "초침"이미지를 매 초마다 움직여야한다는 시계를 보았습니다. 캔버스를 사용하면 매 초마다 캔버스가 삭제되므로 시계 사진과 "초침"사진을로드하는 것은 추울 것입니다.Html5, JavaScript, Canvas Animations?
도움이 필요합니다.
나는 "초침"이미지를 매 초마다 움직여야한다는 시계를 보았습니다. 캔버스를 사용하면 매 초마다 캔버스가 삭제되므로 시계 사진과 "초침"사진을로드하는 것은 추울 것입니다.Html5, JavaScript, Canvas Animations?
도움이 필요합니다.
레이어를 사용해야합니다. 움직이는 부분 만 그리려면. 이 주소에서 좋은 튜토리얼이있다 : 가 http://arc.id.au/CanvasLayers.html
이 웹 사이트에서 인용 :
이전통적인 애니메이션 기술은 아이템, 배경 이미지를 오버레이 투명 레이어의 스택을 사용하는이 애니메이션하려면 각각 별도의 레이어에 그려져 있습니다. 각 프레임에서 변경되는 레이어 만 다시 그려지고 다른 레이어는 변경되지 않습니다. 그래픽 엔진은 사용자 코드가 필요하지 않고 노출 된 영역을 밑에있는 레이어에서 다시 그려 낼 수 있습니다.
하나의 (다소) 쉬운 방법은 두 개의 캔버스를 사용하는 것입니다.
< 캔버스 ID는 = "foregroundCanvas"> </캔버스 >
< 캔버스 ID = "backgroundCanvas"여기 </캔버스 >
>은 W3 스쿨에 큰 튜토리얼 :
http://www.w3schools.com/canvas/canvas_clock_start.asp
다음은 링크의 코드입니다.
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height/2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI/6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>
표시 할 코드가 있습니까? – alex
그런 다음 시계 사진을 캔버스에 넣지 말고 캔버스를 그 위에 그립니다. – david
코드를 작성하지 않았으므로 아이디어를 얻었으므로 구현할 수 없으며 실제로 도움이 필요합니다. –