<!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/

canvas实现碰壁反弹（单个小方块）的更多相关文章

  1. 第八讲：HTML5中canvas实现小球击打小方块游戏

    源码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样能够控制画布居中的位置 ...

  2. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. JavaScript-在当前显示区范围内实现点不到的小方块

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 解决VS报表.rdl 显示乱码“小方块”问题

    报表在编辑状态显示文本显示小方块 如图 原因:字体格式是英文状态下. 解决:选中文本框,选择文本框属性,选择字体,字体改成宋体或微软雅黑.就可以了.

  5. win10下rdlc报表在vs（visual studio）中中文显示小方块的批量处理解决方法

    在网上找vs中rdlc报表显示中文时显示小方块的解决方案,无外就是修改文本框的字体属性.但是对于维护已有的rdlc报表时,有中文的地方(此时都显示了小方块)会很多,再一个一个设置实在太麻烦.所以自己花 ...

  6. 百度前端技术学院task35源代码——听指令的小方块3

    任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当text ...

  7. 百度前端学院task33源码及总结——听指令的小方块

    任务描述 如图,实现一个类似棋盘的格子空间,每个格子用两个数字可以定位,一个红正方形的DOM在这个空间内,正方形中的蓝色边表示这是他的正面,有一个input输入框 在输入框中允许输入如下指令,按下按钮 ...

  8. LigerUI可编辑表格左下角出现白色小方块遮罩层问题解决办法

    LigerUI已经研究了一段时间,总体感觉还不错,基于jQuery开发,框架提供了丰富的UI组件,尤其LigerUI表格,功能还是挺强大的 在使用LigerUI可编辑表格的时候,发现一个小小的问题 当 ...

  9. centos7中文显示为小方块~~啊啊啊 求大佬们解答

    这个问题困扰我很久了,刚好前几天注册了博客园,就想问问大佬们是怎么解决中文显示小方块的? 我试了很多办法,包括但不限于修改i18n配置文件,locale.conf,添加中文字体库等等等... 但都没有 ...

随机推荐

  1. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  2. CSS的盒子模型（Box Model）

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...

  3. Leetcode700.Search in a Binary Search Tree二叉搜索树中的搜索

    给定二叉搜索树(BST)的根节点和一个值. 你需要在BST中找到节点值等于给定值的节点. 返回以该节点为根的子树. 如果节点不存在,则返回 NULL. class Solution { public: ...

  4. D3D10/11中的遮挡查询的使用

    原文:D3D10/11中的遮挡查询的使用       在D3D10/11中,有D3D10_QUERY/D3D11_QUERY接口,通过QUERY接口,我们可以查询GPU的一些状态,比如GPU的时间戳信 ...

  5. SSM框架用JSON进行前后端数据传输

    一个根据用户id查找用户信息的简单功能,使用JSON进行数据的传输 前端代码 这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果,ajax进行前端的数据传输(class内 ...

  6. php 常用类汇总

    转自:http://www.blhere.com/953.html 图表库 下面的类库可以让你很简单就能创建复杂的图表和图片.当然,它们需要GD库的支持. pChart - 一个可以创建统计图的库. ...

  7. Please upgrade the installed version of powershell to the minimum required version and run the command again.

    版权声明:本文为博主原创文章,转载请注明出处.谢谢 https://blog.csdn.net/cow66/article/details/77993908 我的系统是windows 7 安装了vag ...

  8. JAVA高级--异常处理概念和异常处理机制

    什么是异常 程序运行的过程中发生的一些不正常事件 异常分类 Throwable Error  错误 Exception IOException         RuntimeException    ...

  9. 【JZOJ4854】【NOIP2016提高A组集训第6场11.3】小澳的坐标系

    题目描述 小澳者表也,数学者景也,表动则景随矣. 小澳不喜欢数学,可数学却待小澳如初恋,小澳睡觉的时候也不放过. 小澳的梦境中出现了一个平面直角坐标系,自原点,向四方无限延伸. 小澳在坐标系的原点,他 ...

  10. 小爬爬1.requests基础操作

    1.requests安装的问题 (1)如果requests没有安装,我们需要先安装这个模块,在cmd安装不了,我们可以在下面的位置,打开的窗体安装requests模块 pip install requ ...