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>
<style> *{ margin: 0; padding: 0; } </style> </head> <body> <button
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
©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element