84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
通过canvas绘制动态心电图,数据通过json获取,如果有jquery插件更好?
ringa_lee
个人觉得echarts的折线图就能实现啊:http://echarts.baidu.com/demo...
http://echarts.baidu.com/
做出来了,虽然不是很完善,各位大神指导 function fun(id){ return document.getElementById(id); } var timer=null; //var i = -10; //var j=1; //画方格 function drawGrid(){ var c_canvas = document.getElementById("ecgBc"); drawSmallGrid(c_canvas); drawMediumGrid(c_canvas); drawBigGrid(c_canvas); return; } function drawSmallGrid(c_canvas){ var context = c_canvas.getContext("2d"); context.strokeStyle = "#f1dedf"; context.strokeWidth=1; context.beginPath(); for (var x = 0.5; x < 1500; x += 3) { context.moveTo(x, 0); context.lineTo(x, 1500); context.stroke(); } for (var y = 0.5; y < 1500; y += 3) { context.moveTo(0, y); context.lineTo(1500, y); context.stroke(); } context.closePath(); return; } function drawMediumGrid(c_canvas){ var context = c_canvas.getContext("2d"); context.strokeStyle = "#f0adaa"; context.strokeWidth=1; context.beginPath(); for (var x = 0.5; x < 1500; x += 15) { context.moveTo(x, 0); context.lineTo(x, 1500); context.stroke(); }; for (var y = 0.5; y < 1500; y += 15) { context.moveTo(0, y); context.lineTo(1500, y); context.stroke(); }; context.closePath(); return; } function drawBigGrid(c_canvas){ var context = c_canvas.getContext("2d"); context.strokeStyle = "#e0514b"; context.strokeWidth=1; context.beginPath(); for (var x = 0.5; x < 1500; x += 75) { context.moveTo(x, 0); context.lineTo(x, 1500); context.stroke(); }; for (var y = 0.5; y < 1500; y += 75) { context.moveTo(0, y); context.lineTo(1500, y); context.stroke(); }; context.closePath(); return; } drawGrid(); //画曲线 $.ajax({ url : "../data/test.json", success : function(data) { fillDatas(data.wave_data); //fillDatasMiro(data.wave_data); } }); function fillDatas(short_array) { var canvasline = document.getElementById("ecg"); var linectx = canvasline.getContext("2d"); var totalPointCount = short_array.length; var pointX = 0; var pointY = 0; linectx.beginPath(); //setInterval(function () { // linectx.clearRect(0,0,1500,1000); // linectx.save(); // i--; linectx.scale(1,0.5); linectx.translate(0,750); for (var point_index = 0; point_index < totalPointCount; ++point_index) { i--; //setTimeout(linectx.translate(i,750),2000); pointX +=point_index/10; pointY = short_array[point_index]; linectx.lineTo(pointX,pointY); } linectx.stroke(); //linectx.restore(); //},2000); return; } //var canvasline = document.getElementById("ecg"); //var linectx = canvasline.getContext("2d"); //setInterval(function () { // linectx.clearRect(0,0,1500,1000); // linectx.save(); // j++; // linectx.translate(j,0); // dra(); // linectx.restore(); //},50); //function dra(){ // linectx.fillRect(0,0,100,100); //} //function fillDatasMiro(short_array) { // var canvasline = document.getElementById("ecgMiro"); // var linectx = canvasline.getContext("2d"); // var totalPointCount = short_array.length; // var pointX = 0; // var pointY = 0; // linectx.beginPath(); // linectx.scale(1,0.5); // linectx.translate(0,1500); // for (var point_index = 0; point_index < totalPointCount; ++point_index) { // pointX +=point_index/10*2; // pointY = short_array[point_index]*2; // linectx.lineTo(pointX,pointY); // } // linectx.stroke(); // linectx.closePath(); // return; //}; //fun('ecgLine').onmousemove=function (e){ // //放大镜特效 // //alert(1); // var e=e||event; // fun('moro').style.display="block"; // fun('moro').scrollLeft= e.offsetX*2-180; // fun('moro').scrollTop= e.offsetY*2-130; // //跟随特效 // fun('moro').style.left= e.pageX+20+'px'; // fun('moro').style.top= e.pageY+20+'px'; // }; // fun('ecgLine').onmouseout=function () { // fun('moro').style.display="none"; // };
个人觉得echarts的折线图就能实现啊:http://echarts.baidu.com/demo...
http://echarts.baidu.com/