2017-11-18 3 views
0

두 그림이 있습니다 : 하나의 원과 하나의 원으로 원호 끝을 따라 가고 싶습니다. 기본적으로, 난 아크 endAngle 아크의 x & y를 가져올 필요가 그래서 나는 원을 따라 그것을 사용합니다.하나의 그림을 다른 그림을 따르는 방법 (html 캔버스)

//Arc 
context.beginPath(); 
var x2 = canvas.width/2; 
var y2 = canvas.height/2; 
var radius2 = 215; 
var startAngle2 = 1.5 * Math.PI; 
var endAngle2= 2.3 * Math.PI; 
var counterClockwise2 = false; 
context.arc(x2, y2, radius2, startAngle2, endAngle2, counterClockwise2); 
context.lineWidth = 10; 
context.strokeStyle = "blue"; 
context.stroke(); 

//Circle 
context.beginPath(); 
var x3 = x2+ 130; 
var y3 = y2 + 200; 
var radius3 = 20; 
var startAngle3 = 0 * Math.PI; 
var endAngle3 = 2 * Math.PI; 
var counterClockwise3 = false; 
context.arc(x3, y3, radius3, startAngle3, endAngle3, counterClockwise3); 
context.lineWidth = 5; 
context.strokeStyle = "yellow"; 
context.stroke(); 
+0

당신이 접선 할 하시겠습니까? 어떤 수학이 필요하지만, 'lineWidth'는 다르다. – user10089632

+0

예를 들어'paint'로 원하는 것을 그려서 이미지로 업로드하면 더 쉬워진다. – user10089632

+0

나는 타이머와 함께 호를 움직이기 때문에 endPoint () 이동합니다. 원의 x, y가 그 x, y를 따라 가고 싶습니다. 페인트는 방법입니까? – Kostis

답변

1

, 아크의 말 y 좌표, 당신은 Y에 대한 X 용 cossin와 함께 작동합니다.

지금처럼 아크 (x, y)의 끝을 가져 오기 :

var x3 = canvas.width/2 + radius2*Math.cos(endAngle2); 
var y3 = canvas.height/2 + radius2*Math.sin(endAngle2); 
+0

@Kostis, 어떻게 내 솔루션 작동합니까? 나는 당신을 위해 계산을 처리하고 그것을 더 정밀하게 만드는 내장 함수를 사용하기 때문에 이것보다 낫다고 생각한다. – user10089632

+0

나는 그것과 함께 가졌지 만 여전히 endAngle을 가져 와서 다른 것을 자동으로 움직일 수 없다. 요소. – Kostis

+0

내 솔루션에 @Kostis, 당신의'endAngle'은 고정되어 있고,'ctx.rotate()'에 제공 한 각도는 전체 원호와 원을 함께 회전시킬 것이며, 여러분은 그것을 가지고 놀 수 있습니다. – user10089632

0

그것은 ctx.rotate(angle); 회전의 중심을 사용하기 쉽게 0,0에 의해 식별되는 캔버스의 기원이다. 여기서 x는 ctx.translate(x, y);를 사용할 필요가 다른 하나를 선택하기 위해, y는 회전의 중심 좌표는 새 센터

context.arc(x2, y2, radius2, startAngle2, endAngle2, counterClockwise2); 
... 

.... 

    var x3 = x2 + 130; 
    var y3 = y2 + 200; 
을 참조하여 좌표를 변경해야하므로

context.translate(x1,y1) 
context.rotate(20*Math.PI/180) 

마지막이다

여기

context.arc(0, 0, radius2, startAngle2, endAngle2, counterClockwise2); 
.... 

... 
var x3 = 130; 
var y3 = 200; 

이되는 전체 코드입니다 :

당신은 X를 얻고 싶다면

\t var canvas=document.getElementById("clock"); 
 
     var context = canvas.getContext('2d'); 
 

 

 
context.beginPath(); 
 

 
     var x1 = canvas.width/2; 
 
     var y1 = canvas.height/2; 
 
     var radius1 = 200; 
 
     var startAngle1 = 0 * Math.PI; 
 
     var endAngle1 = 2 * Math.PI; 
 
     var counterClockwise1 = false; 
 

 
context.arc(x1, y1, radius1, startAngle1, endAngle1, counterClockwise1); 
 
context.lineWidth = 20; 
 
context.strokeStyle = 'black'; 
 
context.stroke(); 
 
context.font = "bold 76px Arial"; 
 
context.textAlign="center"; 
 
context.textBaseline="middle"; 
 
context.fillText("25:00", canvas.width/2, canvas.height/2); 
 

 
    
 
context.beginPath(); 
 

 
context.translate(x1,y1) 
 
context.rotate(Math.PI) 
 
var radius2 = 215; 
 
var startAngle2 = 1.5 * Math.PI; 
 
var endAngle2 = 2.3 * Math.PI; 
 
var counterClockwise2 = false; 
 
context.arc(0, 0, radius2, startAngle2, endAngle2, counterClockwise2); 
 
context.lineWidth = 10; 
 
context.strokeStyle = "blue"; 
 
context.stroke(); 
 
context.beginPath(); 
 
var x3 = 130; 
 
var y3 = 200; 
 
var radius3 = 20; 
 
var startAngle3 = 0 * Math.PI; 
 
var endAngle3 = 2 * Math.PI; 
 
var counterClockwise3 = false; 
 
context.arc(x3, y3, radius3, startAngle3, endAngle3, counterClockwise3); 
 
context.lineWidth = 5; 
 
context.strokeStyle = "yellow"; 
 
context.stroke();
body { 
 
    background-color: #50B3B9; 
 
} 
 

 
#clock { 
 
    background-color: red; 
 
    position:relative; 
 
} 
 

 
#time { 
 
    position:absolute; 
 
    top:0px; 
 
} 
 

 

 
----------
<div class="container"> 
 
    <canvas id="clock" width="600" height="600"> 
 
     <div id="time">25:00</div> 
 
    </canvas> 
 
    </div>

관련 문제