zoukankan      html  css  js  c++  java
  • 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>
        <style>
        canvas {
            box-shadow: 0 0 5px red;
            display: block;
            margin: 20px auto;
        }
        </style>
    </head>
    <body>
        <canvas id="cv" width="800" height="500"></canvas>
        <script>
            var cv = document.querySelector('#cv');
            var ctx = cv.getContext('2d');
            // 不断绘制矩形,矩形坐标通过计时器累加累减
            // x y方向的移动速度不能是同一个
            var x = 0, y = 0, vx = 1, vy = 1;
            setInterval(function(){
                // 清除画布
                ctx.clearRect(0,0,cv.width,cv.height);
                x+=vx;y+=vy;
                ctx.strokeRect(x,y,50,50);
                if(x<=0||x>=cv.width-50){vx*=-1};
                if(y<=0||y>=cv.height-50){vy*=-1};
            },10);
        </script>
    </body>
    </html>

    文章地址  https://www.cnblogs.com/sandraryan/

  • 相关阅读:
    css3 object-fit详解
    Timing path
    IUS
    FIFO深度
    UVM中的class--2
    UVM中的class
    Binding
    Concurrent Assertion
    Immediate assertion
    sdf
  • 原文地址:https://www.cnblogs.com/sandraryan/p/11578290.html
Copyright © 2011-2022 走看看