canvas 绘点图
canvas 绘点图
项目中需要一个记录点实时变动的信息，在此记录一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
</head> <body>
<canvas id="myCanvas2" class="pointCanvas" width="950" height="650"></canvas>
<canvas id="myCanvas" class="pointCanvas" width="950" height="650"></canvas>
<script type="text/javascript">
var data1 = {
"code": 0,
"msg": "Get complete!",
"data": {
"d3:35:c5:e7:62:27": [369.92, 425.31],
"20:29:73:d7:09:37": [575.07, 192.57],
}
}
jQuery(function() {
$.fn.extend({ // 将可选择的变量传递给方法
runingPoint: function(options) {
return this.each(function() {
var __this = this;
// console.log($(this));
var runingPoint = {
// 参数配置
options: {
// c: $(__this),
radius: 10,
url: null,
imgUrl: null,
points: [],
selectedCircle: null,
hoveredCircle: null
}, // 初始化方法
init: function(config) {
var _this = this,
o = this.options;
$.extend(true, _this.options, config);
console.log(_this.options);
// 第一次执行
_this.getData();
_this.eventsFn(); // 每5秒执行一次
setInterval(function() {
o.hoveredCircle = undefined;
_this.getData();
}, 5000); // 测试数据 start
// setInterval(function(){ // var arrData = [];
// var D = data1.data;
// o.hoveredCircle = undefined;
// for(var i in D){
// arrData.push({x:D[i][0],y:D[i][1],name:i})
// }
// // console.log('init',arrData); // _this.drawFn(arrData);
// }, 5000);//测试数据 end }, // 获取数据
getData: function() {
var _this = this,
o = this.options;
var arrData = [];
$.getJSON(o.url, function(data) {
// console.log('getData',data);
if (data.code == 0) {
var D = data.data;
for (var i in D) {
arrData.push({
x: D[i][0],
y: D[i][1],
name: i
})
}
// 调用绘图方法
_this.drawFn(arrData); }
});
}, //清除canvas
clear: function() {
var _this = this,
o = this.options;
var ctx = __this.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}, // 获取点的信息
getPointInfoFn: function(p) {
var _this = this,
o = this.options; console.log('getPointInfoFn', JSON.stringify(p)); // $.getJSON('/path/to/file', {param1: 'value1'}, function(json, textStatus) { // });
}, // 事件绑定
eventsFn: function() {
var _this = this,
o = this.options;
// 红点click事件
$(__this).on('click', function(e) {
var e = window.event || e
var rect = this.getBoundingClientRect();
var mouseX = e.clientX - rect.left; //获取鼠标在canvsa中的坐标
var mouseY = e.clientY - rect.top; o.hoveredCircle = undefined;
for (var i = 0; i < o.points.length; i++) { // 检查每一个圆，看鼠标是否滑过
var circleX = o.points[i].x;
var circleY = o.points[i].y;
var radius = o.radius;
if (Math.pow(mouseX - circleX, 2) + Math.pow(mouseY - circleY, 2) < Math.pow(radius, 2)) {
o.hoveredCircle = i;
// console.log('click',o.points[i]);
// 获取点信息
_this.getPointInfoFn(o.points[i]);
//点击放大
_this.drawFn(o.points);
break;
}
}
}); }, // 绘图方法
drawFn: function(data) {
var _this = this,
o = this.options;
var D = data;
var ctx = __this.getContext("2d");
var img = document.createElement('img');
img.src = o.imgUrl;
o.points = [];
_this.clear();
if(!o.imgUrl){
drawPointFn();
return;
}
img.onload = function() {
drawPointFn();
}
function drawPointFn(){
ctx.drawImage(img, 0, 0);
ctx.fillStyle = "#FF0000";
// console.log(D);
for (var i in D) {
// 记录点的数据
o.points.push({
x: D[i].x,
y: D[i].y,
name: D[i].name
}); ctx.beginPath();
ctx.arc(D[i].x, D[i].y, i == o.hoveredCircle ? o.radius * 1.5 : o.radius, 0, Math.PI * 2, true); //Math.PI*2是JS计算方法，是圆
ctx.closePath();
ctx.fill();
}
}
} }; // runingPoint End
console.log(options)
runingPoint.init(options); });
}
}); //extend end // 初始化
$(".pointCanvas").runingPoint({
radius: 10,
imgUrl: './img/img.jpg',
url: 'data.json'
}); })
</script>
</body> </html>
下载demo：http://pan.baidu.com/s/1jHjeHRw
canvas 绘点图的更多相关文章
- 第166天：canvas绘制饼状图动画
canvas绘制饼状图动画 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- canvas绘制饼型图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [canvas]用canvas绘制饼状图
折线图之后又来饼状图啦~\(≧▽≦)/~啦啦啦 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- HTML5 Canvas绘文本动画（使用CSS自定义字体）
一.HTML代码: <!DOCTYPE html> <html> <head> <title>Matrix Text - HTML5 Canvas De ...
- canvas 绘圆加边框
HTML5中canvas元素,绘制圆形需要使用路径,开始时要取得图形上下文,首先使用路径来勾勒图形的轮廓,然后设置颜色,进行绘制. arc(cx,cy,radius,start_angle,end_a ...
- 使用canvas绘制饼状图
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- canvas绘制中的API
canvas绘制Z 先贴代码吧: /** * Created by Administrator on 2016/1/26. */ var i; function draw (id){ var canv ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- canvas二三事之签名板与视频绘制
今天,不知道怎么的就点开了语雀,然后就看到了<HTML5 Canvas 教程>,开始了canvas的研究(学习)之旅. 首先,想到的第一个东西就是签名板,上代码: <canvas i ...
随机推荐
- WPF 之 自定义窗体标题栏
在WPF中自定义窗体标题栏,首先需要将窗体的WindowStyle属性设置为None,隐藏掉WPF窗体的自带标题栏.然后可以在窗体内部自定义一个标题栏. 例如,标题栏如下: <WrapPanel ...
- 【阿里云产品公测】给ACE的建议
作者:阿里云用户云想未来 今天给ace带来一些建议,首先,集群模式没什么好说的了,也不是新手用的,今天讲下单实例模式,建议ace开放独立ip购买,按天按月按年付费,收费可以5元左右,为什么这么说呢?其 ...
- Oracle 常用命令大全
一.如何有效地利用数据字典 ORACLE的数据字典是数据库的重要组成部分之一,它随着数据库的产生而产生, 随着数据库的变化而变化, 体现为sys用户下的一些表和视图.数据字典名称是大写的英文字符. 数 ...
- C#使用ICSharpCode.SharpZipLib.dll压缩多个文件
首先通过NuGet管理安装ICSharpCode.SharpZipLib.dll 以下是压缩的通用方法: using System; using System.IO; using System.Web ...
- Matlab之类型转换
int转string:num2str(0); string转int:str2num('-1');
- html+CSS--水平居中设置（定宽块状元素）
来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...
- 浅析js中的this
this的用法 this在日常javascript编码中很常见, 但是一直以来没有好好总结过. 今天在这里好好总结一下. 本文只讨论浏览器环境. this指向全局 var name = "w ...
- hive sql 语法详解
Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 ...
- FFT结果的物理意义
图像的频率是表征图像中灰度变化剧烈程度的指标,是灰度在平面空间上的梯度.如:大面积的沙漠在图像中是一片灰度变化缓慢的区域,对应的频率值很低:而对 于地表属性变换剧烈的边缘区域在图像中是一片灰度变化剧烈 ...
- 二叉树-你必须要懂！（二叉树相关算法实现-iOS）
这几天详细了解了下二叉树的相关算法,原因是看了唐boy的一篇博客(你会翻转二叉树吗?),还有一篇关于百度的校园招聘面试经历,深刻体会到二叉树的重要性.于是乎,从网上收集并整理了一些关于二叉树的资料,及 ...