上面是效果展示
HTML
1 <canvas id="cvs"></canvas>
jS
1 var cvs = document.getElementById('cvs'); 2 var ctx = cvs.getContext('2d'); 3 cvs.width = 600; 4 cvs.height = 600; 5 cvs.style.border = "1px solid #ccc"; 6 7 function drawLine(arr,linecolor) { 8 ctx.beginPath(); 9 ctx.strokeStyle = linecolor; 10 ctx.moveTo(arr[0][0],arr[0][1]); 11 for (var i=1; i<arr.length; i++) { 12 ctx.lineTo(arr[i][0],arr[i][1]); 13 } 14 ctx.stroke(); 15 ctx.closePath(); 16 } 17 18 function drawTab(width) { 19 for(var i=0; i<90; i++) { 20 for (var j=1; j<6; j++) { 21 drawLine([ [7*i,100*j], [7*i+5,100*j] ], "#efefef"); 22 drawLine([ [100*j,7*i], [100*j,7*i+5] ], "#efefef"); 23 } 24 } 25 } 26 drawTab(600); 27 // 鼠標跟隨的事件 28 function mouseEvent() { 29 window.onmousemove = function (e) { 30 if (e.target.id === "cvs") { 31 ctx.clearRect(0, 0, cvs.width, cvs.height); 32 drawTab(600); 33 drawLine([ [0,e.clientY], [600,e.clientY] ], "#ccc"); 34 drawLine([ [e.clientX,0], [e.clientX,600] ], "#ccc"); 35 // console.log(e.target); 36 // console.log(e.clientX+':'+e.clientY); 37 } 38 }; 39 } 40 mouseEvent();
添加動態折線圖
js
1 var cvs = document.getElementById('cvs'); 2 var ctx = cvs.getContext('2d'); 3 var CLENTX = 0; 4 var CLENTY = 0; 5 cvs.width = 600; 6 cvs.height = 600; 7 cvs.style.border = "1px solid #666"; 8 // cvs.style.background = "url(BTC.png) no-repeat center"; 9 cvs.style.backgroundSize = "40%"; 10 cvs.style.filter = "gray"; 11 12 function drawLine(arr,linecolor) { 13 ctx.beginPath(); 14 ctx.strokeStyle = linecolor; 15 ctx.moveTo(arr[0][0],arr[0][1]); 16 for (var i=1; i<arr.length; i++) { 17 ctx.lineTo(arr[i][0],arr[i][1]); 18 } 19 ctx.stroke(); 20 ctx.closePath(); 21 } 22 23 function drawTab(width) { 24 for(var i=0; i<90; i++) { 25 for (var j=1; j<6; j++) { 26 drawLine([ [7*i,100*j], [7*i+5,100*j] ], "#e5e6e5"); 27 drawLine([ [100*j,7*i], [100*j,7*i+5] ], "#e5e6e5"); 28 } 29 } 30 } 31 drawTab(600); 32 33 function mouseEvent() { 34 window.onmousemove = function (e) { 35 if (e.target.id === "cvs") { 36 ctx.clearRect(0, 0, cvs.width, cvs.height); 37 drawTab(600); 38 drawChartLine(); 39 CLENTX = e.clientX-cvs.offsetLeft; 40 CLENTY = e.clientY-cvs.offsetTop; 41 drawLine([ [0,e.clientY-cvs.offsetTop], [600,e.clientY-cvs.offsetTop] ], "#a0a0a0"); 42 drawLine([ [e.clientX-cvs.offsetLeft,0], [e.clientX-cvs.offsetLeft,600] ], "#a0a0a0"); 43 ctx.fillText("x:"+(e.clientX-cvs.offsetLeft)+"y:"+(e.clientY-cvs.offsetTop),e.clientX-cvs.offsetLeft+10,e.clientY-cvs.offsetTop-10); 44 ctx.fillText("金幣網",540,30); 45 // console.log(e.target); 46 // console.log(e.clientX+':'+e.clientY); 47 } else { 48 ctx.clearRect(0, 0, cvs.width, cvs.height); 49 drawTab(600); 50 drawChartLine(); 51 // console.log(arr); 52 } 53 }; 54 } 55 mouseEvent(); 56 var timer = null; 57 var arr = [ [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280],[600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280],[600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280],[600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280], [600-450], [600-330], [600-267], [600-300], [600-250], [600-340], [600-280] ]; 58 function drawChartLine() { 59 clearInterval(timer); 60 for (var k=0; k<arr.length; k++) { 61 arr[k].shift(); 62 } 63 for (var i=0; i<arr.length; i++) { 64 arr[i].unshift(600/arr.length*i); 65 } 66 var byq = 0; 67 68 timer = setInterval(function () { 69 for (var k=0; k<arr.length; k++) { 70 arr[k].shift(); 71 } 72 for(var a=0; a<5; a++) { 73 arr.shift(); 74 arr.push([600-Math.random()*200]); 75 // arr[arr.length-1].unshift(600/arr.length*i); 76 } 77 for (var i=0; i<arr.length; i++) { 78 arr[i].unshift(600/arr.length*i); 79 } 80 ctx.clearRect(0, 0, cvs.width, cvs.height); 81 drawTab(600); 82 ctx.fillText("金幣網",540,30); 83 // drawChartLine(); 84 drawLine(arr, "#0087d3"); 85 drawLine([ [0,CLENTY], [600,CLENTY] ], "#a0a0a0"); 86 drawLine([ [CLENTX,0], [CLENTX,600] ], "#a0a0a0"); 87 ctx.fillText("x:"+(CLENTX)+"y:"+(CLENTY),CLENTX+10,CLENTY-10); 88 // console.log(byq++); 89 },5000); 90 drawLine(arr, "#0087d3"); 91 ctx.fillText("金幣網",540,30); 92 } 93 drawChartLine(); 94 95 ctx.fillText("金幣網",540,30);