Javascript 如何在HTML5画布中增加JS对象的旋转角度？_Javascript_Html_Canvas_Rotation_Html5 Canvas

Javascript 如何在HTML5画布中增加JS对象的旋转角度？

javascript html canvas html5-canvas

Javascript 如何在HTML5画布中增加JS对象的旋转角度？,javascript,html,canvas,rotation,html5-canvas,Javascript,Html,Canvas,Rotation,Html5 Canvas,我的问题是红线的非本质性被旋转了一个等于黄线的角度。。。我只想让这个角度等于起始处的零红线角度。**然后随着鼠标移动而旋转。这是我的底线代码中的一个小问题：确保使用context.beginPath启动每个路径绘制操作以下是如何围绕直线的中点旋转直线： function draw(angle){ ctx.clearRect(0,0,cw,ch); ctx.save(); // draw rotated line ct

我的问题是红线的非本质性被旋转了一个等于黄线的角度。。。我只想让这个角度等于起始处的零红线角度。**然后随着鼠标移动而旋转。

这是我的底线

代码中的一个小问题：确保使用context.beginPath启动每个路径绘制操作

以下是如何围绕直线的中点旋转直线：

    function draw(angle){
        ctx.clearRect(0,0,cw,ch);
        ctx.save();
        // draw rotated line
        ctx.translate(cx,cy);
        ctx.rotate(angle) ; 
        ctx.beginPath();
        ctx.moveTo(-lineLength/2,0)
        ctx.lineTo(lineLength/2,0);
        ctx.strokeStyle='orange';
        ctx.stroke();
        ctx.restore();
    }

示例代码和演示：

请更好地描述你想要达到的目标。我现在就编辑这篇文章。谢谢你的澄清：-我已经发布了一个符合你需要的答案。另外，请确保使用context.beginPath开始所有路径操作，否则，将使用每个context.stroke命令重新绘制之前的所有行。

    function draw(angle){
        ctx.clearRect(0,0,cw,ch);
        ctx.save();
        // draw rotated line
        ctx.translate(cx,cy);
        ctx.rotate(angle) ; 
        ctx.beginPath();
        ctx.moveTo(-lineLength/2,0)
        ctx.lineTo(lineLength/2,0);
        ctx.strokeStyle='orange';
        ctx.stroke();
        ctx.restore();
    }

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    ctx.lineWidth=10;

    var cx=canvas.width/2;
    var cy=canvas.height/2;
    var lineLength = 90;

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

    function draw(angle){
        ctx.clearRect(0,0,cw,ch);
        ctx.save();
        // draw unrotated line
        ctx.beginPath();
        ctx.moveTo(cx-lineLength/2,cy)
        ctx.lineTo(cx+lineLength/2,cy);
        ctx.strokeStyle='red';
        ctx.stroke();
        // draw rotated line
        ctx.translate(cx,cy);
        ctx.rotate(angle) ; 
        ctx.beginPath();
        ctx.moveTo(-lineLength/2,0)
        ctx.lineTo(lineLength/2,0);
        ctx.strokeStyle='orange';
        ctx.stroke();
        ctx.restore();
    }

    function handleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();

      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousemove stuff here
      var dx=mouseX-cx;
      var dy=mouseY-cy;
      var radianAngle=Math.atan2(dy,dx);
      draw(radianAngle);

    }


}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>