js+Canvas实现热力图

最新推荐文章于 2026-05-01 06:14:00 发布

原创

最新推荐文章于 2026-05-01 06:14:00 发布 · 8.6k 阅读

标签

#canvas #js #热力图 #原生 #html

收录于

本文借鉴腾讯位置服务的热力图绘制技术，通过Canvas实现数据点的动态展示，探讨了热力图绘制过程中的性能瓶颈及优化方向。

实际效果图
在这里插入图片描述
本文借鉴与腾讯位置服务的一位前端工程师写的代码，不得不佩服鹅厂的人才很牛，于是就借鉴一下，不过不知是我对于人家的代码理解不太透彻，还是别的原因，下面的代码运行的很慢，要很久才能将热力图展示出来，里面重点为的构造函数和Canvas画图
主要借鉴这个网站[腾讯大神热力图]https://mp.weixin.qq.com/s/PAEj8Pie5O6RrOmezocpWw
还有这个热力图解释
如果看到的朋友觉得我的代码哪里有问题，还请指出来，谢谢，因为效果一直不好

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hotmap</title>
</head>

<body>
    <canvas id="hotmap" width="800" height="800" style="border:1px solid #000000;"></canvas>
    <script>
        var pointsdata = [{
            x: 4