zoukankan      html  css  js  c++  java
  • 帆布小球碰壁效果

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>帆布小球碰壁效果</title>

    <style>

    canvas {
    border:2px dotted #ccc;
    }
    </style>
    </head>
    <body>
    <canvas id="canvas" width="300" height="450"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var raf;

    var ball = {
    x: 100,
    y: 100,
    vx: 5,
    vy: 2,
    radius: 25,
    color: 'blue',
    draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
    }
    };

    function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ball.draw();
    ball.x += ball.vx;
    ball.y += ball.vy;

    if (ball.y + ball.vy > canvas.height ||
    ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
    }
    if (ball.x + ball.vx > canvas.width ||
    ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
    }

    raf = window.requestAnimationFrame(draw);
    }

    canvas.addEventListener('mouseover', function(e) {
    raf = window.requestAnimationFrame(draw);
    });

    canvas.addEventListener("mouseout", function(e) {
    window.cancelAnimationFrame(raf);
    });

    ball.draw();
    </script>
    </body>
    </html>

  • 相关阅读:
    mac前端解除端口占用命令
    Mac安装Brew
    Mac Webstrom 快捷键
    linux yarn安装
    js-新兴的API,最佳实践,离线应用于客户端存储
    js-高级技术
    js-Ajax与Comet
    js-错误处理与调试,JSON
    js-DOM2,表单脚本
    js-事件
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/9131377.html
Copyright © 2011-2022 走看看