python虚线画田字格_使用canvas绘制虚线田字格，以及鼠标跟随的十字线

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 functiondrawLine(arr,linecolor) {13 ctx.beginPath();14 ctx.strokeStyle =linecolor;15 ctx.moveTo(arr[0][0],arr[0][1]);16 for (var i=1; i

23 functiondrawTab(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 functionmouseEvent() {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 functiondrawChartLine() {59 clearInterval(timer);60 for (var k=0; k

65 }66 var byq = 0;67

68 timer = setInterval(function() {69 for (var k=0; k

76 }77 for (var i=0; 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);