[javascript]canvas 热点区域图，框选区域并在区域显示热点

最新推荐文章于 2024-07-24 18:03:00 发布

wty19

最新推荐文章于 2024-07-24 18:03:00 发布

阅读量5.6k

点赞数

分类专栏：前端 HTML5 文章标签：前端 HTML5 javascript canvas 热区域图

本文链接：https://blog.csdn.net/wty19/article/details/22939111

版权

本文介绍了如何使用HTML5的Canvas元素创建热区选择功能，包括选择区域的颜色配置、阴影效果和文字显示。同时展示了如何在选择的热点区域上显示详细信息，如事件名称和数据。通过监听鼠标事件，实现框选和移动时的实时更新，并通过颜色区分不同热度的区域。此外，还提供了工具函数以辅助坐标计算和图形绘制。

摘要由CSDN通过智能技术生成

需求：

设置人员需要在图片上框选区域，并且后台针对区域读出数据后显示热点。

做法：

直接上代码：

/*****
 * 作者：jww_dragon@163.com
 * 依赖: jquery
 * 
 ********************/

var goog = function(tag) {
	this._hotpoint = [];
	this._square = {};
	if (typeof tag === "string") {
		this.canvas = document.getElementById(tag);
	} else {
		this.canvas = tag;
	}
	this.context = this.canvas.getContext('2d');
	this.colorStyle = {};
	this.colorStyle.selectColor = "rgba(255,0,0,0.8)";
	this.colorStyle.selectedColor = "rgba(255,0,0,0.3)";
	this.colorStyle.showColorBG = "rgba(0,0,0,0.2)";
	this.colorStyle.shadowColor = "#000000";
	this.colorStyle.fontStyle = "16px Arial Black";
	this.colorStyle.fontColor = "yellow";
	this.context.shadowOffsetX = 5;
	this.context.shadowOffsetY = 5;
	this.context.shadowBlur = 10;
}

/**
 *换一个id监听（一般用不到）
 **/
goog.prototype.listen = function(documentId) {
	this.canvas = document.getElementById(documentId);
	this.canvas = document.getElementById(documentId);
	this.context = this.canvas.getContext('2d')
}

/**
 *颜色配置
 * selectColor,selectedColor 框选颜色，默认红色， showColorBG 展示的背景蒙层色
 * shadowColor 影阴颜色，fontStyle 字体,fontColor 字体颜色
 **/
goog.prototype.setColor = function(type, color) {
	if (typeof color != "undefined" && type != "undefined") {
		this.colorStyle[type] = color;
	}
}

/**
 * 以下是选择部分
 ***/
goog.prototype.init_mask = function() {
	var position_top = this.canvas.offsetTop;
	var position_left = this.canvas.offsetLeft;
	this.temp_canvas = document.createElement("canvas");
	this.temp_canvas.setAttribute('width', this.canvas.width);
	this.temp_canvas.setAttribute('id', "mask-gogo123");
	this.temp_canvas.setAttribute('height', this.canvas.height);
	this.temp_canvas.setAttribute('style', 'position: absolute;left: '
			+ position_left + 'px;top: ' + position_top + 'px;');
	this.canvas.parentNode.appendChild(this.temp_canvas);
	//return temp_canvas;
}
goog.prototype.drowInitSquare = function(_list) {
	this.context.shadowColor = this.colorStyle.shadowColor;
	this.context.font = this.colorStyle.fontStyle;
	//this.con