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