<!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. SASS：sass语法参照列表及教程

    http://sass-lang.com/documentation/file.SASS_REFERENCE.html 保存一下,上面的链接包括了scss中所有语法规则. 转载自:http://www ...

  2. idea启动报错：Access denied for user 'root '@'192.168.100.XXX' (using password: YES)

    Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean wit ...

  3. docker容器时区问题

    原文:docker容器时区问题 版权声明:本文为博主原创文章,随意转载. https://blog.csdn.net/Michel4Liu/article/details/80890868 本系列目录 ...

  4. npm run dev 和 npm run serve

    1.ERR引发的思考 创建好的 vue 项目直接执行 vue run dev 报错?运行 vue run serve 就可以启动...如下 npm run dev npm ERR! missing s ...

  5. 【JZOJ4803】【NOIP2016提高A组模拟9.28】求导

    题目描述 输入 输出 样例输入 2x^2+3x+1 样例输出 4x+3 数据范围 样例解释 求导的意思: 多项式是由若干个单项式构成的 单项式的一般形式是ax^b,其中ab都是常数,x是自变量 对于单 ...

  6. JS文字球状放大效果

    在线演示 本地下载

  7. JavaSript中的正则表达式

    正则表达式是对字符串操作的逻辑公式,表达了对字符串的一种过滤逻辑. 相对于.NET和Perl,JS对正则表达式的支持相当朴素,或者说JS的正则表达式是perl正则表达式的一个子集. 一.正则表达式引擎 ...

  8. Windows中查看PowerShell版本和virbox版本，vagrant 版本

    我并不是很熟悉什么是PowerShell,但是有种直觉是:如果想在Windows中使用系统自带的功能取代bash shell,PowerShell或许是比DOS批处理更好的选择.不过,从头开始再来一门 ...

  9. 微信开发之web开发者工具

    web开发者工具. 有任何疑问或建议请私信我,或者在评论区大家一起探讨. 概述 为帮助开发者更方便.更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具.它是一个桌面应用,通过模拟微信客户 ...

  10. React全家桶打造共享单车后台管理系统项目_第1篇_项目环境搭建_首页编写

    1.项目介绍 项目github地址:https://github.com/replaceroot/React-manageSystem  项目整体架构: 课程大纲:     第一章:React基础知识 ...