canvas 绘点图
生活随笔
收集整理的這篇文章主要介紹了
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 || evar 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 绘点图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在unbuntu16.04上安装网易云音
- 下一篇： Mockito 中被 Mocked 的对