JavaScript Canvas 外摆线

2015/03/15 | 1分钟阅读 | 更新于 2015/03/15

起题目好难。。

概述

用js计算，用canvas绘制，实现机械臂的时候因为一点小问题不小心画出了一堆外摆线的图。先说一下我的设计方案以x轴正方向为零度，逆时针旋转一定大小的角度。（这句话是不是没说明白。。就是大家熟悉的坐标系）主要有两根线，第一根线AB绕点A旋转，线BC绕点B旋转，B点坐标为A点坐标加上角1的余弦/正弦值乘AB的长度然后角2为角1加上BC相对AB旋转的角度，C点坐标为B点坐标机上BC长度乘上角2的余弦和正弦值。改变角1和角2，就会确定ABC各自的位置然后

上图

多图！

下面的格式为角1每和角2每次递增的值！

起始角，角1为120，角2为-120

-10,10

-10,20

-10,50

-10,60

-10,130

-10,360

-10,720

-3,1

-3,5

-3,13

-3,13 完整

-3,133

丢代码

<html>
  <body>
    <canvas id="cc" width="800" height="800"></canvas>
  </body>
  <script>
    var canvas = document.getElementById("cc");
    var paper = cc.getContext("2d");

    var len1 = 140;
    var len2 = 100;

    function drawArm(angleA, angleB) {
      angleA *= Math.PI / 180;
      angleB *= Math.PI / 180;
      paper.beginPath();
      paper.lineWidth = "3";
      var X0 = 400;
      var Y0 = 400;
      paper.closePath();
      paper.beginPath();
      paper.moveTo(X0, Y0);
      var X1 = X0 + len1 * Math.cos(angleA);
      var Y1 = Y0 - len1 * Math.sin(angleA);
      paper.lineTo(X1, Y1);
      paper.stroke();
      paper.closePath();
      paper.beginPath();
      paper.arc(X1, Y1, 2, 0, Math.PI * 2, false);
      paper.fill();
      paper.closePath();

      paper.beginPath();
      paper.strokeStyle = "#125096";
      paper.moveTo(X1, Y1);
      var X2 = X1 + len2 * Math.cos(angleA + angleB);
      var Y2 = Y1 - len2 * Math.sin(angleA + angleB);
      paper.lineTo(X2, Y2);
      paper.stroke();
      paper.closePath();

      paper.beginPath();
      paper.arc(X2, Y2, 2, 0, Math.PI * 2, false);
      paper.fill();
      paper.closePath();
      paper.strokeStyle = "#000000";
    }
    var a1 = 120; //角1
    var a2 = -70; //角2
    var dTime = 60;
    var isContinue = true;
    var a = 0;
    function gameLoop() {
      //paper.clearRect(0,0,800,800);
      drawArm(a1, a2);
      a1 -= 5; // 角1增量
      a2 += 5; // 角2增量
      a++;
      if (a >= 30) {
        //isContinue=true;
        /*a1=120; 
            a2=-120;
            a=0;*/
      }

      if (isContinue) {
        setTimeout("gameLoop()", dTime);
      }
    }
    gameLoop();
  </script>
</html>