canvas 初试小demo

 

一个简单的圆运动canvas

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <canvas id="cvs2" width='800' height='800'></canvas>
    <style>
    canvas {
      background:#f1f1f1;
    }
    </style>
    <script>

    (function(glob, fun, name){
      fun.call(glob, name)
    })(this, function(name){
      if(this[name]) return

      function initBalls(leg, maxR, cw, ch, maxSpeed){
        var balls = []
        for(var a=0;a<leg;a++){      
          var x = Math.floor(Math.random()*cw)
          var y = Math.floor(Math.random()*ch)
          var r = Math.floor(Math.random() * (maxR-1)) + 1
          var ys = Math.floor(Math.random() * (maxSpeed - 1)) + 1
          var xs = Math.floor(Math.random() * (maxSpeed - 1)) + 1
          var c = "rgb("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+")"
          x = x - r < 0 ? r : x + r > cw ? cw -r : x
          y = y - r < 0 ? r : y + r > ch ? ch -r : y
          ys = Math.random() > 0.5 ? ys : -ys
          xs = Math.random() > 0.5 ? xs : -xs
          var ball = {
            x: x,
            y: y,
            r: r,
            ys: ys,
            xs: xs,
            c: c
          }
          balls.push(ball)
        }
        return balls
      }

      function draw(cxt, balls){
        for(var i=0;i<balls.length;i++){
          cxt.beginPath()
          cxt.arc(balls[i].x, balls[i].y, balls[i].r, 0, 2*Math.PI)
          cxt.strokeStyle = cxt.fillStyle = balls[i].c
          cxt.fill()
        }
        cxt.stroke()
      }

      function run(cxt, balls, cw, ch){
        cxt.clearRect(0, 0, cw, ch)
        for(var i=0;i<balls.length;i++){
          var x = balls[i].x
          var y = balls[i].y
          var xs = balls[i].xs
          var ys = balls[i].ys
          var r = balls[i].r
          x += xs
          y += ys
          if(x > cw-r){
            x = cw * 2 -2*r -x
            xs = -xs
          }else if(x < r){
            x = 2*r-x
            xs = -xs
          }
          if(y > ch-r){
            y = ch * 2 -2*r -y
            ys = -ys
          }else if(y < r){
            y = 2*r-y
            ys = -ys
          }
          balls[i].x = x
          balls[i].xs = xs
          balls[i].y = y
          balls[i].ys = ys
        }
        draw(cxt, balls)
      }
      
      this[name] = function(obj){
        var leg, maxR, cw, ch, dom, maxSpeed
        dom = obj.dom
        if(typeof(dom) === 'object' && (dom instanceof HTMLElement)){
          leg = obj.leg ? obj.leg : 50
          maxR = obj.maxR ? obj.maxR : 5
          cw = obj.cw ? obj.cw : 5
          ch = obj.ch ? obj.ch : 5
          maxSpeed = obj.maxSpeed ? obj.maxSpeed : 5
          var balls = initBalls(leg, maxR, cw, ch, maxSpeed)
          var cxt = dom.getContext("2d");
          draw(cxt, balls)
          setInterval(function(){
            run(cxt, balls, cw, ch)
          }, 12)
        }
      }
    }, 'vmuCas')

    vmuCas({
      leg: 80,
      maxR: 8,
      cw: 800,
      ch: 800,
      maxSpeed: 3,
      dom: document.getElementById('cvs2')
    })
    </script>
</body>
</html>

 

posted @ 2019-08-21 14:18  微木Vmumu  阅读(301)  评论(0)  编辑  收藏  举报