javascript canvas lineto move
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #cw { position: relative; } body { margin: 20px; } </style></head><body> <canvas id="cw"></canvas> <script>const WIDTH = 800;const HEIGHT = 700;const canvas = document.createElement('canvas');canvas.width = WIDTH;canvas.height = HEIGHT;const context = canvas.getContext('2d');document.body.appendChild(canvas);class Art { constructor(param0) { this.param0 = param0; this.index =param0; this.state=0; } update() { if(this.index > 500){ this.index = this.param0; if(this.state==0){ this.state=1; }else{ this.state=0; } } this.index += 10; } render(context) { if(this.state==0){ context.beginPath(); context.moveTo(0, 0+this.index); context.lineTo(0, 100+this.index); context.lineTo(100, 100+this.index); context.lineTo(100, 0+this.index); context.fill(); }else{ context.beginPath(); context.moveTo(0+this.index, 0); context.lineTo(0+this.index, 100); context.lineTo(100+this.index, 100); context.lineTo(100+this.index, 0); context.fill(); } }}obj=new Art(0);function loop(timestamp) { context.clearRect(0, 0, WIDTH, HEIGHT); obj.update(); obj.render(context); window.requestAnimationFrame((ts) => loop(ts));}window.requestAnimationFrame((ts) => loop(ts)); </script></body></html>