canvas实现点线交汇交互效果代码-html代码-BFW代码库

canvas实现点线交汇交互效果代码

代码语言：html

所属分类：其他

代码描述：canvas实现点线交汇交互效果代码，鼠标移动试试。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
html, body {
  width:  100%;
  height: 100%;
  margin: 0;
  background: rgb(30,30,30);
}

#C{
}
</style>


</head>

<body>
  <canvas id="C"></canvas>

  
      <script  >
window.onload = function () {
  let ctx = document.getElementById("C"),
  c = ctx.getContext("2d"),
  w,
  h;
  fitCanvas();

  let mouse = { x: w / 2, y: h / 2 },
  last_mouse = {};

  function dist(A, B) {
    return Math.sqrt(Math.pow(A.x - B.x, 2) + Math.pow(A.y - B.y, 2));
  }
  class point {
    constructor(x, y, s) {
      this.x = x;
      this.y = y;
      this.shown = false;
      this.s = s;
    }
    update(x, y, s) {
      this.x = x;
      this.y = y;
      this.s = s;
    }
    show(color, line_thickness) {
      if (!this.shown) {
        //c.fillStyle=color;
        //c.fillRect(this.x-size/2,this.y-size/2,size,size);

        c.fillStyle = color;
        c.beginPath();
        c.arc(this.x, this.y, 3 / 2, 0, 2 * Math.PI);
        c.lineWidth = line_thickness;
        c.fill();

        this.shown = true;
      }
    }
    show2(color, line_thickness) {
      if (!this.shown) {

        c.strokeStyle = color;
        c.beginPath();
        c.arc(this.x, this.y, this.s / 2, 0, 2 * Math.PI);
        c.lineWidth = line_thickness;
        c.stroke();

        this.shown = true;
      }
    }
    cleanup() {
      this.shown = false;
    }}

  class edge {
    constructor(A, B) {
      this.a = A;
      this.b = B;
      this.l = dist(A, B);
      this.shown = false;
    }
    update(A, B) {
      this.a = A;
      this.b = B;
      this.l = dist(A, B);
    }
    show(color, line_thickness) {
      if (!this.shown) {
        c.strokeStyle = color;
        c.beginPath();
        c.lineTo(this.a.x, this.a.y);
        c.lineTo(this.b.x, this.b.y);
        c.lineWidth = line_thickness;
        c.stroke();

        this.shown = true;
      }
    }
    cleanup() {
      this.shown = false;
    }}

  class triangle {
    constructor(A, B, C) {
      //define points
      this.a = A;
      this.b = B;
      this.c = C;
      //define main edges
      this.ab = new edge(this.a, this.b);
      this.bc = new edge(this.b, this.c);
      this.ca = new edge(this.c, this.a);
      //calculate and define curcumicenter
      this.scc = this.curcumicenter();
      this.sr = this.curcumiradius();
      this.s = new point(this.scc.x, this.scc.y, this.sr);
      //define edges of the triangle
      this.as = new edge(this.a, this.s);
      this.bs = new edge(this.b, this.s);
      this.cs = new edge(this.c, this.s);
    }
    move(m) {
      //update point c
      this.c = m;
      //update edges
      this.ab.update(this.a, this.b);
      this.bc.update(this.b, this.c);
      this.ca.update(this.c, this.a);
      //update curcumicenter  
      this.scc = this.curcumicenter();
      this.sr = this.curcumiradius();
      this.s.update(this.scc.x, this.scc.y, this.sr);
      //s
      this.as.update(this.a, this.s);
      this.bs.update(this.b, this.s);
      this.cs.update(this.c, this.s);
    }
    curcumicenter() {
      let D = 2 * (
      this.a.x * (this.b.y - this.c.y) +
      this.b.x * (this.c.y - this.a.y) +
      this.c.x * (this.a.y - this.b.y));

      let S = {
        x: (
        (this.a.x * this.a.x + this.a.y * this.a.y) * (this.b.y - this.c.y) +
        (this.b.x * this.b..........完整代码请登录后点击上方下载按钮下载查看