javascript - Canvas - Rotating Paths -


I want to know how to rotate a line in the canvas, say I have a canvas set-up.

  ctx.beginPath (); Ctx.strokeStyle = "# 000000"; Ctx.moveTo (p1.x, p1.y); Ctx.lineTo (P2X, P2i); ctx.stroke (); Ctx.closePath ();   

"post-text" itemprop = "text">

p 1 & amp; P2:

Around the middle point of that section is the idea:

  • context.save using context

  • context Rotate the specified radian angle using .rotate

  • This is a difficult part ... since the canvas has already been rotated and the canvas is now the midpoint of the line, so you should have line length of line zero / 2 and lineTo for moveTo Lines length / 2: context.moveTo (-length / 2,0); and context.lineTo (Length / 2.0); p> snippet "data-lang =" js "data-delete =" false ">

      var canvas = document.getElementById ( "canvas"); var ctx = canvas.getContext ( "2-D"); var cw = canvas.width; var ch = canvas. Height; var p1 = {x: 75, y: 75 }; Var p2 = {x: 150, y: 150}; var dx = p2.x-p1.x; var dai = p 2.y-p1.y; var length = math.Sqrt (dx * dx + dy * dy); Var angle = Mtktan 2 (DI, DX); Var midX = (p2.x + p1.x) / 2; Var midy = (p2.y + p1.y) / 2; console.log (Midx, midy); draw (angle); requestAnimationFrame (animate); function animate (time) {requestAnimationFrame (animate); attract (Angle); angle + = Math.PI / 30;} function draw (Redianangl) {ctx.clearRect (0,0, Kanwaskvind canvas. Height); ctx.save (); ctx.translate (midx, Midy ); ctx.rotate (radianAngle); ctx.beginPath (); ctx.strokeStyle = 'red'; ctx.moveTo (-length / 2,0); ctx.lineTo (length / 2.0); ctx.stroke (); Ctx.restore (); }   
      body {background color: ivory; } Canvas {boundary: 1 px solid red;}   
      & lt; Canvas ID = "canvas" width = 300 Note: This code shows rotation around the middle point of your line, but you can rotate around any point using the  References Translestate (any RotationPointAx, any rotationpoint);    

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -