simple heat的使用

<script setup lang="ts">
import  SimpleHeat  from "simpleheat-ts";

import * as dat from "dat.gui";

let frame: number | null = null;

const oCanvas = document.createElement("canvas");
oCanvas.width = window.innerWidth * 0.75;
oCanvas.height = window.innerHeight * 0.75;
oCanvas.style.border = "5px solid red";

const data = [
  [0, 0, 100],
  [window.innerWidth * 0.1, window.innerHeight * 0.1, 100],
  [window.innerWidth * 0.2, window.innerHeight * 0.2, -100],
  [window.innerWidth * 0.3, window.innerHeight * 0.3, 100],
  [window.innerWidth * 0.4, window.innerHeight * 0.4, 100],
  [window.innerWidth * 0.5, window.innerHeight * 0.5, 100],
  [window.innerWidth * 0.6, window.innerHeight * 0.6, 100],
  [window.innerWidth * 0.7, window.innerHeight * 0.7, 100],
  [window.innerWidth * 0.75, window.innerHeight * 0.75, 100],
];

const heat = new SimpleHeat(
  document.createElement("canvas"),
  document.createElement("canvas")
);

heat.data(data);
heat.max(100);
document.body.appendChild(oCanvas);

draw();

function draw() 
  heat.draw(oCanvas.getContext("2d")!, 0.5);
  frame = null;


document.getElementsByTagName("canvas")[0].onmousemove = function (e) 
  heat.add([e.clientX, e.clientY, -100]);
  frame = frame || window.requestAnimationFrame(draw);
;
</script>

<template></template>

<style scoped></style>

heatmap-ts的使用

<script setup lang="ts">
import HeatMap from "heatmap-ts";

const oCanvas = document.createElement("canvas");
oCanvas.style.border = "5px solid red";

const heatMap = new HeatMap(
  maxOpacity: 0.6,
  radius: 50,
  blur: 0.9,
  canvas: oCanvas,
  width: window.innerWidth,
  height: window.innerHeight,
);

heatMap.setData(
  max: 100,
  min: 1,
  data: [
    
      x: 0,
      y: 0,
      value: 100,
      radius: 10,
    ,
    
      x: window.innerWidth * 0.1,
      y: window.innerHeight * 0.1,
      value: 100,
      radius: 50,
    ,
    
      x: window.innerWidth * 0.2,
      y: window.innerHeight * 0.2,
      value: 100,
      radius: 100,
    ,
    
      x: window.innerWidth * 0.3,
      y: window.innerHeight * 0.3,
      value: 100,
      radius: 50,
    ,
    
      x: window.innerWidth * 0.5,
      y: window.innerHeight * 0.5,
      value: 100,
      radius: 20,
    ,
    
      x: window.innerWidth * 0.6,
      y: window.innerHeight * 0.6,
      value: 100,
      radius: 20,
    ,
    
      x: window.innerWidth * 0.7,
      y: window.innerHeight * 0.7,
      value: 100,
      radius: 20,
    ,
    
      x: window.innerWidth * 0.8,
      y: window.innerHeight * 0.8,
      value: 100,
      radius: 20,
    ,
    
      x: window.innerWidth * 0.9,
      y: window.innerHeight * 0.9,
      value: 100,
      radius: 20,
    ,
    
      x: window.innerWidth * 1.0,
      y: window.innerHeight * 1.0,
      value: 100,
      radius: 20,
    ,
  ],
);

document.body.appendChild(oCanvas);
</script>

<template></template>

<style scoped></style>