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>