84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
通过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/