[Javascript] ジグザク線(zig zag line)、波線を描画する

Javascript

ジグザグ線（波線）を描画する

開始点と終了点を指定し、ジグザグ線を描画する方法。
Javascriptだけでなく他の言語でも応用できる。

<!DOCTYPE HTML>
<html>
<head>
<script>

class Point{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
}

var startP = new Point(50,60);
var endP = new Point(310,350);

window.onload = function(){
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");

  var zigzagCnt = 10;
  var rangeX = (endP.x - startP.x) / zigzagCnt;
  var rangeY = (endP.y - startP.y) / zigzagCnt;

  ctx.lineWidth = 3;
  ctx.strokeStyle = "#FF0000";
  ctx.beginPath();

  var x = startP.x;
  var y = startP.y;
  ctx.moveTo(x,y);

  var lx, ly, mx, my;
  // ジグザグ線描画処理
  for (var i = 0; i < zigzagCnt; i++) {
    lx = x;
    ly = y;
    
    x += rangeX;
    y += rangeY;

    mx = (lx + x) / 2;
    my = (ly + y) / 2;
    
    // ジグザグの幅を調整
    scale = Math.sqrt(0.75);
    mx += scale * (y - ly);
    my -= scale * (x - lx);
    
    ctx.lineTo(mx,my);
    ctx.lineTo(x,y);
  }
  ctx.stroke();

  ctx.strokeStyle = "#00FF00";
  ctx.beginPath();
  ctx.moveTo(startP.x,startP.y);
  ctx.lineTo(endP.x,endP.y);
  ctx.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid black;">
</canvas>
</body>
</html>

f:id:WaterFalls:20190601023127p:plain:w300
ジグザグ線

参考： stackoverflow.com



初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発