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> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!