SoFunction
Updated on 2025-04-10

Canvas place rebound effect random graphics (example)

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.