It's good to see the refresh progress bar of headlines when making headlines , I made one myself , Take a look at the effect ：

When you see this, you will think about how to achieve it ?

* Draw a square （ use 4 To draw a line segment ）, Don't draw a square directly .
* Control the downward movement of the upper right corner , At the same time, the lower right corner moves up （ change Y Just to the left ）.
* After the exercise on the right , Stop right , Let the top left corner down , The lower left corner also moves up .
* After the left movement is finished , Stop on the left , Activate the right side , Repeat the process .
Let's write the function to draw the square first
// Constructors function DynamicRectangle(o){ this.x=0,// Origin coordinates X this.y=0,// Origin coordinates Y
this.x1=0,//X1 coordinate this.y1=0,//Y1 coordinate this.x2=0,//X2 coordinate this.y2=0,//Y2 coordinate
this.x3=0,//X3 coordinate this.y3=0,//Y3 coordinate this.x4=0,//X4 coordinate this.y4=0,//Y4 coordinate
this.init(o); } // initialization DynamicRectangle.prototype.init=function(o){ for(var key
in o){ this[key]=o[key]; } } // Draw lines
DynamicRectangle.prototype.drawLine=function(ctx,startX,startY,endX,endY){
ctx.save(); ctx.beginPath(); ctx.translate(this.x,this.y);// Set the origin coordinates
ctx.moveTo(startX,startY); ctx.lineTo(endX,endY); if(this.lineWidth){// line width
ctx.lineWidth=this.lineWidth; } if(this.lineCap){ ctx.lineCap=this.lineCap;// Thread cap
} if(this.stroke){// Stroke
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null; ctx.stroke(); }
ctx.restore(); } // draw DynamicRectangle.prototype.render=function(context){ var
ctx=context; // Draw well 4 Line segment this.drawLine(ctx,this.x1,this.y1,this.x2,this.y2);// Upper side line
this.drawLine(ctx,this.x2,this.y2,this.x3,this.y3);// Right line
this.drawLine(ctx,this.x3,this.y3,this.x4,this.y4);// Lower sideline
this.drawLine(ctx,this.x4,this.y4,this.x1,this.y1);// Left line return this; }
To make a square
// Create a square var rect = new DynamicRectangle({ x:7,// Origin coordinates x y:2,// Origin coordinates y
x1:0,// Coordinates of upper left corner of square x y1:0,// Coordinates of upper left corner of square y x2:100,// Coordinates of upper right corner of square x y2:0,// Coordinates of upper right corner of square y
x3:100,// Coordinates of the lower right corner of the square x y3:60,// Coordinates of the lower right corner of the square y x4:0,// Coordinates of lower left corner of square x y4:60,// Coordinates of lower left corner of square y
lineWidth:1.5,// line width lineCap:'square',// Thread cap stroke:true,// Stroke
strokeStyle:'palevioletred',// The color of the line }).render(ctx);
The effect is as follows ：

How to move , Let's look at the right first , Move down the upper right corner , Just make the top right corner Y Just increase the coordinates , Add timing function , Repeat to add to the upper right corner Y coordinate , And draw it again

var dir=1;// direction var dis=2;//X Initial value of axis movement move=function(){ // Clean up canvas
ctx.clearRect(0,0,W,H); rect.y2+=dis*dir; rect.render(ctx); }
timmer=setInterval(move,10);// Start the mission
Here's the effect

But it's going down , So limit the direction , After reaching the bottom, turn back and go up , And back to the top, adjust the direction down again , stay move Function can be adjusted inside ：
move=function(){ // Clean up canvas ctx.clearRect(0,0,W,H); rect.y2+=dis*dir;
rect.render(ctx); if(rect.y2>=60||rect.y2<=0){ dir=-dir;// Change direction } }

Join the movement in the lower right corner
move=function(){ // Clean up canvas ctx.clearRect(0,0,W,H); rect.y2+=dis*dir;
rect.y3+=-dis*dir; rect.render(ctx);
if(rect.y2>=60||rect.y2<=0||rect.y3>=60||rect.y3<=0){ dir=-dir;// Change direction } }

Add the left side to the movement , Because after the right movement, switch to the left , The left movement stops , The right side moves again , Need to add a parameter to control .
move=function(){ // Clean up canvas ctx.clearRect(0,0,W,H);
if(animateDir=='right'){// The right side of the rectangle is moving rect.y2+=dis*dir; rect.y3+=-dis*dir;
}else{// The left side of the rectangle is moving rect.y1+=dis*dir2; rect.y4+=-dis*dir2; } rect.render(ctx);
if(animateDir=='right'){ if(rect.y2>=60||rect.y2<=0||rect.y3>=60||rect.y3<=0){
dir=-dir; animateDir='left';// Switch to left motion } }else{
if(rect.y1>=60||rect.y1<=0||rect.y4>=60||rect.y4<=0){ dir2=-dir2;
animateDir='right';// Switch to right motion } } }
The effect is as follows ：

Speed up ,timmer=setInterval(move,10);

Put all these in a package , Let's see the effect

Complete code ：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK"> <title></title>
onclick='start()'> start </button> <button onclick='stop()'> end </button> <div
id='process'> </div> <script type="text/javascript"> var timmer=null; function
start(){ if(timmer) return ;// Prevent repeated clicks var process =
document.getElementById('canvasDiv'); process.style.display="block";
timmer=setInterval(move,10);// Start the mission } function stop(){ var process =
document.getElementById('canvasDiv'); process.style.display="none";
clearInterval(timmer); // End the mission timmer=null; } // Constructors function
DynamicRectangle(o){ this.x=0,// Origin coordinates X this.y=0,// Origin coordinates Y this.x1=0,//X1 coordinate
this.y1=0,//Y1 coordinate this.x2=0,//X2 coordinate this.y2=0,//Y2 coordinate this.x3=0,//X3 coordinate
this.y3=0,//Y3 coordinate this.x4=0,//X4 coordinate this.y4=0,//Y4 coordinate this.order=0, this.init(o);
} // initialization DynamicRectangle.prototype.init=function(o){ for(var key in o){
this[key]=o[key]; } } // Draw lines
DynamicRectangle.prototype.drawLine=function(ctx,startX,startY,endX,endY){
ctx.save(); ctx.beginPath(); ctx.translate(this.x,this.y);// Set the origin coordinates
ctx.moveTo(startX,startY); ctx.lineTo(endX,endY); if(this.lineWidth){// line width
ctx.lineWidth=this.lineWidth; } if(this.lineCap){ ctx.lineCap=this.lineCap;// Thread cap
} if(this.stroke){// Stroke
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null; ctx.stroke(); }
ctx.restore(); } // draw DynamicRectangle.prototype.render=function(context){ var
ctx=context; // Draw well 4 Line segment this.drawLine(ctx,this.x2,this.y2,this.x3,this.y3);// Right line
this.drawLine(ctx,this.x4,this.y4,this.x1,this.y1);// Left line
if(this.order>0){// Draw the top edge first
this.drawLine(ctx,this.x1,this.y1,this.x2,this.y2);// Upper side line
this.drawLine(ctx,this.x3,this.y3,this.x4,this.y4);// Lower sideline }else{ First draw the bottom edge
this.drawLine(ctx,this.x3,this.y3,this.x4,this.y4);// Lower sideline
this.drawLine(ctx,this.x1,this.y1,this.x2,this.y2);// Upper side line } return this; }
createCanvas(); var move; function createCanvas(){ var process =
document.getElementById('process'); var div = document.createElement('div');
div.id="canvasDiv";
div.style.cssText="position:absolute;top:50px;left:30px;display:none;"; var
canvas = document.createElement('canvas'); var W = canvas.width = 114; var H =
canvas.height = 64; div.appendChild(canvas); process.appendChild(div); var ctx
= canvas.getContext('2d'); // Create a square var rect = new DynamicRectangle({ x:7,// Origin coordinates x
y:2,// Origin coordinates y x1:0,// Coordinates of upper left corner of square x y1:0,// Coordinates of upper left corner of square y x2:100,// Coordinates of upper right corner of square x y2:0,// Coordinates of upper right corner of square y
x3:100,// Coordinates of the lower right corner of the square x y3:60,// Coordinates of the lower right corner of the square y x4:0,// Coordinates of lower left corner of square x y4:60,// Coordinates of lower left corner of square y
lineWidth:1.5,// line width lineCap:'square',// Thread cap stroke:true,// Stroke
strokeStyle:'palevioletred',// The color of the line order:1// Draw order }).render(ctx); var dir=1;// direction
var dir2=1;// direction 2 var dis=2;//X Initial value of axis movement var animateDir='right'; move=function(){
// Clean up canvas ctx.clearRect(0,0,W,H); if(animateDir=='right'){ rect.y2+=dis*dir;
rect.y3+=-dis*dir; }else{ rect.y1+=dis*dir2; rect.y4+=-dis*dir2; }
rect.render(ctx); if(animateDir=='right'){
if(rect.y2>=60||rect.y2<=0||rect.y3>=60||rect.y3<=0){ dir=-dir;
animateDir='left'; if(dir<0){ rect.order=-1; }else{ rect.order=1; } } }else{
if(rect.y1>=60||rect.y1<=0||rect.y4>=60||rect.y4<=0){ dir2=-dir2;
animateDir='right'; if(dir2<0){ rect.order=-1; }else{ rect.order=1; } } } } }
</script> </body> </html>
It can be used with a little modification , Give it to the third company, brothers !

Technology
Daily Recommendation