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.fi.........完整代码请登录后点击上方下载按钮下载查看