canvas에 그려놓은 라인들의 rotate를 각각 주고 싶습니다.

Question

현재 가운데를 중식으로 각 색상의 라인을 그려주고 있습니다. 각각 rotate를 다르게 주고 싶은데첫번째 라인의 rotate의 영향이 다른 라인의 rotate까지 영향을 주더라구요.색상은 각각 주기가 성공했지만 왜 rotate는 각각 주기가 안될까요 ?

vernum · Accepted Answer

일단 코드만 봤을 때 150, 150 센터 값을 더 해 주셔야 할듯합니다.

vernum · Answer

2d context 전체가 회전을 했네요

카카오톡 · Answer

vernum 답변감사합니다.라인만 해주려고할때는 어떻게 해주어야할까요 ?

vernum · Answer

moveTo lineTo 를 병행 해서 그리세요아니면 path2d를 이용하시면 됩니다.

카카오톡 · Answer

vernum 아 그방법 밖에 없나요 ?각도라는 값에 따라 바꿔줘야하는게 있어서시계처럼 움직여야 해서요 ..그럼 이 각도를 x,y포인트로 변환하는 수식을 만드는 방법밖에 없나보군요

vernum · Answer

삼각함수 :)

암소프라도뷰 · Answer

ctx.save와 ctx.restore 메소드를사용 해서 , 컨텍스트의 상태를 저장, 복구하시면 원하는기능을 사용하실수 있습니다.https://webisfree.com/2018-06-14/canvas-%EA%B8%B0%EC%A1%B4-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%80%EC%9E%A5-%EB%B0%8F-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-save()-restore() 추가로 코드 들여쓰기는 답변을위해 임의로 수정한거 맞나요 ??

카카오톡 · Answer

&#64;vemum ctx.beginPath(); //ctx.strokeStyle &#61; &#34;#FF0000&#34;; ctx.arc(150, 150, 150, 0, 2 * Math.PI); ctx.strokeStyle&#61;&#34;black&#34;; // ctx.closePath(); ctx.stroke(); ctx.beginPath(); // ctx.strokeStyle &#61; &#34;blue&#34;; ctx.strokeStyle&#61;&#34;blue&#34;; //90 * Math.PI / 180 ctx.moveTo(150, 150); var r &#61; 150; var Angle &#61;90; //90도 x &#61; r * Math.cos(Angle * Math.PI/180); y &#61; r * Math.sin(Angle * Math.PI/180); ctx.lineTo(x, y); // ctx.closePath(); ctx.stroke();알려주신대로 삼각함수 사용해서 좌표를 만들어봤습니다.어느부분이 잘못되었을까요 ? 계속 이상한데 찍히네요 ;;

카카오톡 · Answer

답변감사합니다 . 이걸 빼먹고 있었네요 덕분에 성공하였습니다 (__) var r &#61; 150; var Angle &#61; 0 ; var x &#61; r * Math.cos(Angle * Math.PI/180)&#43;r; var y &#61; r * Math.sin(Angle * Math.PI/180)&#43;r;

canvas에 그려놓은 라인들의 rotate를 각각 주고 싶습니다.

9개의 답변

Q&A 목록