From February 2015 to IT industry, it has been nearly two years. From the beginning of java to the front end, we have been groping along the way. All the way to now, the front-end God is absolutely impossible to talk about. At most, it is a beginner.
From the beginning of ignorance, to now learning to write github, blog, in fact, there is not much to write, after all, I have just started, can only be said to be in accordance with their own interests, write interesting small projects, project problems, but also hope that God can correct, the demo function has been achieved, later I will style, code and so on. Aspects are optimized.
Project githu address: https://qq597367462.github.io/ttmusic/#/heartBeat
Project operation effect:
Project Profile: Using native js+canvas to make the html page of simulated ECG, because it is packaged on github with the project, so the single page mode of vue.js is used. In fact, you don't need any additional framework and style, you can also complete the demo. Now let's disassemble the project together!
1: To create a canvas canvas on the page, canvas is indispensable to make the "line" of ECG move on our page. Because the project is relatively simple, so far the DOM elements on the page have been written, and the main workload is concentrated in the js section.
1 <div class="heartBeat">
2 <canvas id="can">Canvas Drawing board</canvas>
3 </div>
2: Define several variables and assign them. These variables are needed for calculation at runtime.
1 var can = document.getElementById('can'),//TCanvas
2 pan,//Get 2 D image API Interface
3 index = 0,//For reception setinerval Value
4 flag = true,//Used to control the direction of electrocardiogram broken line
5 wid = document.body.clientWidth,//Get browser width
6 hei = document.body.clientHeight,//Get Browser Height
7 x = 0,//The "dot" of ECG on the canvas x Axis coordinates, starting at 0
8 y = hei/2;//The y-axis coordinates of the electrocardiogram's "point" on the canvas begin with the middle position of the y-axis of the page
3: Initialize the canvas and set various attributes for the canvas
1 function start(){
2 can.height = hei;//Setting Canvas Height
3 can.width = wid;//Set Canvas Width
4 pan = can.getContext("2d");//Get 2 D image API Interface
5 pan.strokeStyle = "#08b95a";//setpc
6 pan.lineJoin = "round";//Setting Brush Trajectory Based on Spot Stitching
7 pan.lineWidth = 9;//Set Brush Thickness
8 pan.beginPath();//Start a Brush Path
9 pan.moveTo(x,y);//Locate our "writing point"
10 index = setInterval(move,1);//Let's move our brushes
11 };
As you can see, we haven't touched on the action of "drawing" here, just initializing the canvas size to fill the screen, defining the operation of brush color, thickness, stroke point and so on, and then using setInterval method to keep the brush moving according to the route we calculated. If you are not familiar with setInterval method, I suggest you take a look. setInterVal usage This is no longer the case. Because we want the electrocardiogram to circulate indefinitely and automatically, we encapsulate it here as the start() function, so that when the electrocardiogram moves to the far right of the screen, we can re-execute the start() function, so that the electrocardiogram can circulate indefinitely.
4. Let the electrocardiogram move! It can be said that the previous steps are not difficult, the real core code is to let our electrocardiogram move, and is in accordance with the route we want to move forward, let's make the electrocardiogram really alive.
1 function move(){
2 x++;//x The axis is always moving, so x Always increasing
3 if(x < 100){
4 //Top 100 px，We don't want to move vertically. Let the point just move vertically, so we don't do anything.
5 }else{
6 if(x >= wid - 100){
7 //The last 100 px，Similarly, it is hoped that ECG will only do horizontal exercise without fluctuating up and down, so no operation will be done.
8 }else{
9 //To make the electrocardiogram look more realistic, we hope that the peak and trough of the electrocardiogram are random every time we exercise, which is more similar to human heartbeat, so we give it a random value. z
10 var z = Math.random()*280;
11
12 if(y <= z){
13 //The coordinates of the canvas are calculated from the upper left corner, that is, the coordinates of the points in the upper left corner are (0).,0),y It's the coordinate of the current brush. y Axis, if y less than z，On behalf of y Having reached the peak position, we are ready to start moving towards the trough.
14 flag = true
15 }
16 if((hei - y) <= z){
17 //If the current brush is in y Axis coordinates y Distance from the bottom of the browser hei The difference is less than the random value. z，The brush represents the current position of the trough and is ready to turn to the peak position.
18 flag = false
19 }
20 if(flag){
21 //If flag by true，Representing that the brush is still moving toward the trough, it takes a little effort to understand that the coordinates of the points in the upper left corner of the canvas are (0).,0)，therefore y The bigger the value, the more the brush is in the ___________ y The closer the axis is to the bottom of the browser, the more it moves toward the trough. y The value is increasing, and in order to make the peak and valley steeper, I set it here. y += 5，
22 y+=5
23 }else{
24 //If flag by false，Represents a movement toward the crest. y The value is decreasing.
25 y-=5
26 }
27 }
28 }
29 if(x == wid){
30 //Stop drawing when the brush moves to the right edge of the browser
31 pan.closePath();
32 //Clear cycle
33 clearInterval(index);
34 //take index Zero and prepare for the next cycle
35 index = 0;
36 //Relocate the brush in the middle up and down on the left side of the screen
37 x = 0;
38 y = hei/2;
39 flag = true;
40 //Redraw the next ECG
41 start();
42 }
43 //lineTo and stroke The function is responsible for describing the trajectory of motion.
44 pan.lineTo(x,y);
45 pan.stroke();
46 }
5: Note that the ECG can actually run here, but it should be noted that if you set your body height to 100%, otherwise the canvas may not be able to fill the entire page.
1 html,body{
2 width: 100%;
3 height: 100%;
4 margin: 0;
5 }
Project complete code:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Simulated electrocardiogram</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
7 <style>
8 html,body{
9 width: 100%;
10 height: 100%;
11 margin: 0;
12 }
13 </style>
14 </head>
15 <body>
16 <div id="canvas">
17 <canvas id="can">Canvas Drawing board</canvas>
18 </div>
19
20 <script src="js/vue.min.js"></script>
21 <script>
22 var can = document.getElementById('can'),
23 pan,
24 index = 0,
25 flag = true,
26 wid = document.body.clientWidth,
27 hei = document.body.clientHeight,
28 x = 0,
29 y = hei/2;
30 start();
31 function start(){
32 can.height = hei;
33 can.width = wid;
34 pan = can.getContext("2d");//Get 2 D image API Interface
35 pan.strokeStyle = "#08b95a";//setpc
36 pan.lineJoin = "round";//Setting Brush Trajectory Based on Spot Stitching
37 pan.lineWidth = 9;//Set Brush Thickness
38 pan.beginPath();
39 pan.moveTo(x,y);
40 index = setInterval(move,1);
41 };
42 function move(){
43 x++;
44 if(x < 100){
45
46 }else{
47 if(x >= wid - 100){
48
49 }else{
50 var z = Math.random()*280;
51 if(y <= z){
52 flag = true
53 }
54 if((hei - y) <= z){
55 flag = false
56 }
57 if(flag){
58 y+=5
59 }else{
60 y-=5
61 }
62 }
63 }
64 if(x == wid){
65 pan.closePath();
66 clearInterval(index);
67 index = 0;
68 x = 0;
69 y = hei/2;
70 flag = true;
71 start();
72 }
73 pan.lineTo(x,y);
74 pan.stroke();
75 }
76
77 /* */
78
79 </script>
80 </body>
81 </html>