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