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

上面是效果展示

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);

 

转载于:https://www.cnblogs.com/kPedestrian/p/5796654.html