Невозможно повернуть стрелки вокруг кругов в определенной степени, используя холст

У меня есть холст, на котором я создал два круга. проблема, с которой я сталкиваюсь, что обе стрелы зависят от другой, если я буду делать изменения по степени стрелки внутреннего круга, тогда внешняя стрелка также вращается с их положения. Мне просто нужен два круга и их агрессивные стрелки, которые независимы друг от друга. Невозможно повернуть стрелки вокруг кругов в определенной степени, используя холст

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    body{ 
     background: #666; 
    } 
    #canvas1{ 
     background: blue; 
    } 
</style> 
<script> 
function start(){ 
    start1(); 
    start2(); 
} 



function start1() { // inner circle 
    var ctx = document.getElementById("canvas1").getContext("2d"); 

    var cx = 200; 
    var cy = 200; 
    var radius = 100; 

    ctx.beginPath(); // inner circle creation 
    ctx.arc(cx, cy, radius, 0, Math.PI * 2); 
    ctx.stroke(); 

     var e = xy1(cx, cy, radius, 0 *(Math.PI/180)); // 
     ctx.fillStyle = "#000000" 
     ctx.translate(cx,cy); 
     ctx.rotate(0 * (Math.PI/180)); // for arrow rotation 
     ctx.translate(-cx,-cy); 
     ctx.save(); 
     ctx.beginPath(); // generate inner arrow 
     ctx.moveTo(e.x,e.y); 
     ctx.lineTo(e.x + 0 ,e.y + 10); 
     ctx.lineTo(e.x + 60 ,e.y + 10); 
     ctx.lineTo(e.x + 60 ,e.y + 20); 
     ctx.lineTo(e.x + 75 ,e.y + 0); 
     ctx.lineTo(e.x + 60 ,e.y - 20); 
     ctx.lineTo(e.x + 60 ,e.y - 10); 
     ctx.lineTo(e.x + 0 ,e.y - 10); 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.restore(); 



} 


function start2(){ // outer circle 
    var ctx1 = document.getElementById("canvas1").getContext("2d"); 

    var cx2 = 200; 
    var cy2 = 200; 
    var radius2 = 120; 

    ctx1.beginPath(); // outer circle creation 
    ctx1.arc(cx2, cy2, radius2, 0, Math.PI * 2); 
    ctx1.stroke(); 


     var f = xy2(cx2, cy2, radius2, 0 *(Math.PI/180)); 
     ctx1.fillStyle = "#000000" 
     ctx1.translate(cx2,cy2); 
     ctx1.rotate(90 * (Math.PI/180)); // for arrow rotation 
     ctx1.translate(-cx2,-cy2); 
     ctx1.save(); 
     ctx1.beginPath(); // generate arrow 
     ctx1.moveTo(f.x2,f.y); 
     ctx1.lineTo(f.x2 + 0 ,f.y2 + 10); 
     ctx1.lineTo(f.x2 + 60 ,f.y2 + 10); 
     ctx1.lineTo(f.x2 + 60 ,f.y2 + 20); 
     ctx1.lineTo(f.x2 + 75 ,f.y2 + 0); 
     ctx1.lineTo(f.x2 + 60 ,f.y2 - 20); 
     ctx1.lineTo(f.x2 + 60 ,f.y2 - 10); 
     ctx1.lineTo(f.x2 + 0 ,f.y2 - 10); 
     ctx1.closePath(); 
     ctx1.stroke(); 
     ctx1.restore(); 
} 
function xy1(cx, cy, radius, radianAngle) { // for inner circle 
     var x = cx + radius * Math.cos(radianAngle); 
     var y = cy + radius * Math.sin(radianAngle); 
     return ({ 
      x: x, 
      y: y 
     }); 
    } 
function xy2(cx2, cy2, radius2, radianAngle2) { // for outer circle 
     var x2 = cx2 + radius2 * Math.cos(radianAngle2); 
     var y2 = cy2 + radius2 * Math.sin(radianAngle2); 
     return ({ 
      x2: x2, 
      y2: y2 
     }); 
    } 

window.onload=start; 
</script> 


</head> 

<body> 
    <canvas id="canvas1" width=400 height=400></canvas> 

</body> 

</html>

источник

2017-02-07 Ankit Kumar

Ну, вы повернули свой контекст визуализации уже при рисовании первой стрелки - так что вам придется учитывать это при рисовании второго. – CBroe

Да, я знаю, но когда я делаю то же самое для внешней стрелки, он не будет работать. –

Вы просто не сохраняете свой контекст перед вращением. Сохраните это, прежде чем применять какое-либо преобразование.

ctx1.save(); //save first 
    ctx1.translate(cx2,cy2); 
    ctx1.rotate(90 * (Math.PI/180)); // for arrow rotation 
    ctx1.translate(-cx2,-cy2); 

    ctx1.beginPath(); // generate arrow 
    ctx1.moveTo(f.x2,f.y); 
    ctx1.lineTo(f.x2 + 0 ,f.y2 + 10); 
    ctx1.lineTo(f.x2 + 60 ,f.y2 + 10); 
    ctx1.lineTo(f.x2 + 60 ,f.y2 + 20); 
    ctx1.lineTo(f.x2 + 75 ,f.y2 + 0); 
    ctx1.lineTo(f.x2 + 60 ,f.y2 - 20); 
    ctx1.lineTo(f.x2 + 60 ,f.y2 - 10); 
    ctx1.lineTo(f.x2 + 0 ,f.y2 - 10); 
    ctx1.closePath(); 
    ctx1.stroke(); 
    ctx1.restore();  //and restore in the end (as you already did)

источник

2017-02-07 11:46:35 Syntac

Невозможно повернуть стрелки вокруг кругов в определенной степени, используя холст

ответ

Смежные вопросы