Canvas place rebound effect random graphics (example)
var raf; var arror = []; var running = false; //Draw a circle function createBall() { return { x: 0, y: 0, vx: ()*10, vy: ()*10, radius: 25, color:"red", draw: function() { (); (, , , 0, * 2, true); (); = ; (); } } } //Draw square function createSquare() { return { x: 0, y: 0, vx: ()*10, vy: ()*10, color:"red", draw: function() { (); = ; (, ,30, 30); (); } } } //Draw pentagram function createStar() { return { x: 0, y: 0, vx: ()*10, vy: ()*10, color:"red", draw: function() { = "24px serif"; = "hanging"; =; ("Pentagonal Star",, ); } } } //Draw triangle function createTriangle() { return { x: 0, y: 0, vx: ()*10, vy: ()*10, color:"red", draw: function() { (); (,); (+25,+25); (+25,-25); =; (); } } } //Clear function clear() { = 'rgba(255,255,255,0.3)'; (0,0,,); } //Judge whether the graphics coordinates exceed the canvas range function draw() { clear(); (function(ball, i){ (); += ; += ; if ( + > || + < 0) { = -; } if ( + > || + < 0) { = -; } }); raf = (draw); } ('click',function(e){ if (!running) { raf = (draw); running = true; } var colorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"]; var Graphics = ["Round","Square","Star","Triangle"]; var typexz=Graphics[(()*4)]; var ball; switch(typexz){ case "Round": ball = createBall(); break; case "Square": ball = createSquare(); break; case "Star": ball = createStar(); break; case "Triangle": ball = createTriangle(); break; } = ; = ; = colorarr[(() * 10 + 3)]; (ball); }); draw(); ('keydown',function (e) { if(==32){ (); (raf); running = false; } })
The above article "Canvas" is the random graph (example) of the rebound effect (example) is all the content I share with you. I hope you can give you a reference and I hope you can support me more.