html5中图片热点,HTML5 创建热点图
通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高。
下面是HTML部分:
#heatmap{background-image:url("mapbg.jpg");
}
Reset
接着进行变量声明及初始化:
var points = {}; //保存每个点击点的值,用于选取颜色
var SCALE = 3; //缩放比例,为使保存在points中的坐标点在一定范围内
//初始化x,y
var x = -1;var y = -1;
接着是绘制热点图主函数方法:
functiondrawHeatMap() {
document.getElementById("resetButton").onclick = reset; //点击button使调用reset函数。
//根据id获取canvas并获取其上下文
canvas = document.getElementById("heatmap");
context= canvas.getContext("2d");//为canvas设置一个高透明度
context.globalAlpha = 0.2;//设置混合模式,源图像与目标图像混合
context.globalCompositeOperation = "lighter";//绘图后,每个0.1秒热点加亮
functionlighten() {if (x != -1) {
addToPoint(x, y);
}
setTimeout(lighten,100);
}//在canvas画布中获取鼠标坐标(相对于画布)
canvas.onmousemove = function(e) {
x= e.clientX -e.target.offsetLeft;
y= e.clientY -e.target.offsetTop;
addToPoint(x, y);
}//移出canvas画布后停止热点加亮
canvas.onmouseout = function(e) {
x= -1;
y= -1;
}
lighten();
}
获取canvas画布绘图的鼠标坐标为:x = e.clientX - e.target.offsetLeft; 因为clientX是鼠标相对于窗口的位置,而绘图是基于canvas坐标基准的,所以要减去鼠标点击目标的offsetLeft(即减去margin,padding的left值,使其为相对于canvas的坐标值)。
reset函数:
functionreset() {
points={};
context.clearRect(0, 0, 300, 300);
x= -1;
y= -1;
}
调用canvas的claerRect函数,将整个canvas区域清空并重制。
getColor函数:
functiongetColor(intensity) {var colors = ["#072933", "#2E4045", "#8C593B", "#B2814E", "#FAC268", "#FAD237"];return colors[Math.floor(intensity/2)]; // colors数组下标最大值为5,故intensity <= 11}
drawPoint函数,使用context.arc根据特定半径绘制园。
functiondrawPoint(x, y, radius) {
context.fillStyle=getColor(radius);
radius= Math.sqrt(radius)*6;
context.beginPath();
context.arc(x, y, radius,0, Math.PI*2, true);
context.closePath();
context.fill();
}
注:arc() 方法创建弧/曲线(用于创建圆或部分圆)。
提示:如需通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI。
中心:arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角:arc(100,75,50,0,1.5*Math.PI)
结束角:arc(100,75,50,0*Math.PI,1.5*Math.PI)
addToPoint函数,每次移动鼠标或悬停都会调用这个函数。设置最高热度值为10。
functionaddToPoint(x, y) {
x= Math.floor(x/SCALE);
y = Math.floor(y/SCALE);
if (!points[[x, y]]) {
points[[x, y]]= 1;
}else if(points[[x, y]] == 10) {return;
}else{
points[[x, y]]++;
}
drawPoint(x*SCALE, y*SCALE, points[[x, y]]);
}
最后注册一个loadDemo函数,窗口加载完毕后调用
window.addEventListener("load", drawHeatMap, true);
最后完整代码如下:
1
2
3
4
5 #heatmap{
6 background-image:url("mapbg.jpg");
7 }
8
9
10
11 Reset
12
13
14 varpoints={};15 varSCALE= 3;16 varx= -1;17 vary= -1;18
19 functiondrawHeatMap() {20 document.getElementById("resetButton").οnclick=reset;21
22 canvas=document.getElementById("heatmap");23 context=canvas.getContext("2d");24 context.globalAlpha= 0.2;25 context.globalCompositeOperation= "lighter";26
27 functionlighten() {28 if(x!= -1) {29 addToPoint(x, y);30 }31 setTimeout(lighten,100);32 }33
34 canvas.οnmοusemοve= function(e) {35 x=e.clientX-e.target.offsetLeft;36 y=e.clientY-e.target.offsetTop;37
38 addToPoint(x, y);39 }40
41 canvas.οnmοuseοut= function(e) {42 x= -1;43 y= -1;44 }45
46 lighten();47 }48
49 functionreset() {50 points={};51 context.clearRect(0,0,300,300);52 x= -1;53 y= -1;54 }55
56 functiongetColor(intensity) {57 varcolors=["#072933","#2E4045","#8C593B","#B2814E","#FAC268","#FAD237"];58 returncolors[Math.floor(intensity/2)];
59 }60
61 functiondrawPoint(x, y, radius) {62 context.fillStyle=getColor(radius);63 radius=Math.sqrt(radius)*6;64
65 context.beginPath();66 context.arc(x, y, radius,0, Math.PI*2,true);67
68 context.closePath();69 context.fill();70 }71
72
73 functionaddToPoint(x, y) {74
75 x=Math.floor(x/SCALE);
76 y=Math.floor(y/SCALE);
77
78 if(!points[[x, y]]) {79 points[[x, y]]= 1;80 }else if(points[[x, y]]== 10) {81 return;82 }else{83 points[[x, y]]++;84 }85 drawPoint(x*SCALE, y*SCALE, points[[x, y]]);86 }87
88 window.addEventListener("load", drawHeatMap,true);89
90
91
92
View Code
原文:http://www.cnblogs.com/yanjliu/p/3906068.html
html5中图片热点,HTML5 创建热点图相关推荐
- html中图片之间有缝隙,科技常识:HTML5中图片之间的缝隙完美解决方法
今天小编跟大家讲解下有关HTML5中图片之间的缝隙完美解决方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5中图片之间的缝隙完美解决方法 的相关资料,希望小伙伴们看了有所帮助. ...
- HTML5 创建热点图
通过HTML5 canvas画布创建简单的热点图,当鼠标划过时产生热点,停留时间越长,热点亮度越高. 下面是HTML部分: <!DOCTYPE html> <html>< ...
- HTML5之10 __使用 Canvas API创建 热点图
使用Canvas API 可以创建许多应用: 图形.图表.图片编辑, 其中最奇妙的一个应用是修改或覆盖已有内容. 最流行的覆盖图被称为热点图. 热点图可以用在城市地图上来标记交通路况, 或者显示风 ...
- HTML5隐藏图片代码,HTML5终极备忘大全(图片版+文字版)
一.前言兼图片备忘 下图是我从testking网站上的Ultimate HTML5 Cheatsheat这篇文章中备忘图片(已大小优化,因为图片较高,故滚动显示). 但是,上面毕竟是图片格式(原图上兆 ...
- Dreamweaver 中图片热点连接的制作 (热点工具)
一.Dreamweaver中的制作方法 DreamWeaver是MacroMedia公司出品的一个所见即所得的网页制作工具,它 提供了非常强大的主页制作功能,而且使用起来非常的顺手.方便,目前正日益 ...
- HTML5中图片路径的几种使用方式
1.图片和网页文件在同一个文件夹里(相对路径) <img src="css.jpg" width="200" height="300" ...
- 怎么在html5中插入vr,HTML5:2分钟给VR场景加交互
VR场景让用户以360度的方式体验品牌.产品或服务 HTML5:网页如何播放VR视频中介绍了使用play2VR能轻松为网页增加VR场景. 想象预约看房,售楼小姐带领客户漫步小区,选择户型,参观样板房, ...
- html5中制作表格,(html5表格的制作.doc
(html5表格的制作 教学项目五 HTML中表格的制作 [教学内容] 讲解HTML中制作表格的标志 [教学目的] 使学生掌握简单表格的制作 [教学重点] 表格中单元格的合并操作 [教学难点] 理解属 ...
- html5中自动播放,HTML5自动播放一次(HTML5 autoplay once)
HTML5自动播放一次(HTML5 autoplay once) 以下javascript函数提供并自动播放音频文件(通过HTML 5音频标签),在6秒时切换mp3播放并从头开始循环+自动播放音频. ...
最新文章
- python快速入门答案-Python快速入门(一)
- VBRK-RFBSK - 会計への転記ステータス
- linux如何执行平台,如何在Linux平台运行HelloWorld及测试项目
- xml-treeview转换
- dnspod ddns 下载_简约时尚休闲女装毛衣针织衫春装详情页_psd素材免费下载_ 750*13450像素(编号:24815329)...
- 机器学习与神经网络的学习
- 罗格斯大学计算机科学排名,罗格斯大学计算机工程硕士专业排名读完这篇立即秒懂...
- 7-9 打印倒直角三角形图形
- 机器学习与量化交易项目班 [从零搭建自动交易系统]
- JavaScript实现点击一下显示,再点击一下隐藏的功能(使用工厂函数)
- 树莓派CM4封装AD底座使用分享
- 聊聊这8种单例模式的优缺点
- (c语言)字符串的大小写字母转化函数
- 如何快速删除 Word 文档中的分页符
- 经典同步时序逻辑电路分析汇总(第六道)(同步四进制可逆加减法计数器)
- RadiAnt DICOM Viewer 2021.1中文版
- RIV A128显卡维修
- 三大通信运营商天猫电器城开店
- 基于Django开发的购物网站,类似于京东商城Django_Store
- 如何在鼠标右键菜单中添加自定义菜单?工效率提升一倍
热门文章
- 解决小米miui系统调用系统裁剪图片功能camera.action.CROP后崩溃或重新打开app的问题
- 用C++解决数学类问题的练习
- TRIZ系列-创新原理-14~15-曲面化原理和动态性原理
- 跑步戴哪种耳机好,最适合运动跑步的蓝牙耳机
- esxtop 指标%RDY,NUMA,Wide-VMs
- 无人值守安装linux操作系统
- Odoo 16 企业版手册 - 库存管理之寄售
- BUUCTF [GXYCTF2019]Ping Ping Ping 1
- ChatGPT账号注册,中国手机号为什么不行?
- 西部数据蓝盘 绿盘和黑盘 到底有什么区别?