1 <!DOCTYPE > 2 <html > 3 <body> 4 <canvas width="800" height="450"></canvas> 5 <script> 6 var context = document.getElementsByTagName(‘canvas‘)[0].getContext(‘2d‘); 7 var width = context.canvas.width; 8 var height = context.canvas.height; 9 var lastX = width * Math.random(); 10 var lastY = height * Math.random(); 11 var hue = 0; 12 function line (){ 13 14 context.save(); 15 context.translate(width/2, height/2); 16 context.scale(0.9, 0.9); 17 context.translate(-width/2,-height/2); 18 19 context.beginPath(); 20 context.lineWidth = 5 + Math.random() *10; 21 context.moveTo(lastX, lastY); 22 lastX = width * Math.random(); 23 lastY = height * Math.random(); 24 25 context.bezierCurveTo(width*Math.random(),height*Math.random(),width*Math.random(),height*Math.random(),lastX,lastY); 26 27 hue = hue + 10 *Math.random(); 28 context.strokeStyle = ‘hsl(‘+ hue +‘,50%,50%)‘; 29 context.shadowColor = ‘white‘; 30 context.shadowBlur = 10; 31 32 context.stroke(); 33 context.restore(); 34 } 35 setInterval(line,100); 36 function background(){ 37 context.fillStyle = ‘rgba(0,0,0,0.1)‘; 38 context.fillRect(0,0, width, height) 39 40 } 41 setInterval(background, 100) 42 </script> 43 </body> 44 </html>
时间: 2024-10-31 14:43:54