<!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. IP地址与，域名，DNS服务器，端口号的联系与概念

    一,什么是IP地址? 每一个联入到Internet的计算机都需要一个世界上独一无二的IP地址,相当于人们的身份证号码! IP地址有A类,B类,C类,D类和E类之分,目前D类和E类都暂时作为保留地址! ...

  2. (一)学习SpringBoot介绍

    为什么去要用到SpringBoot 特点: 创建独立的spring应用 嵌入tomcat ,jetty不需要部署 提供starters poms简化maven配置 尽可能自动配置spring'应用 提 ...

  3. Ajax--Ajax基于原生javascript：创建Ajax对象、链接服务器、发送请求、接受响应结果

    Ajax概述 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 同步请求: 请求是由浏览器发送 页面会刷新 异步请求: 请求是由浏览器的一 ...

  4. MySQL数据库操作语句(补充1)（cmd环境运行）

    一.字符串类型 enum枚举类型 /* 也叫做枚举类型,类似于单选! 如果某个字段的值只能从某几个确定的值中进行选择,一般就使用enum类型, 在定义的时候需要将该字段所有可能的选项都罗列出来: */ ...

  5. Android中View的layout mechanism（布局机制）

    layout mechanism Android中View的layout mechanism主要分为两个阶段:measure阶段和layout阶段.layout mechanism按照一定的顺序进行, ...

  6. Leetcode796.Rotate String旋转字符串

    给定两个字符串, A 和 B. A 的旋转操作就是将 A 最左边的字符移动到最右边. 例如, 若 A = 'abcde',在移动一次之后结果就是'bcdea' .如果在若干次旋转操作之后,A 能变成B ...

  7. Hdu 4810

    2014-05-02 15:53:50 题目连接 2013年南京现场赛的题目,现场的时候,排在我们前面的队伍基本都过了这题,我们后面的队伍也有不少过了这题,唯独我们没有.. 后来是Qingyu Sha ...

  8. Oracle TRIM函数语法介绍

    Oracle中trim的完整参数TRIM([ {  { LEADING | TRAILING | BOTH }   [ trim_character ] | trim_character   }  F ...

  9. sqlite数据库文件导入到sqlserver 2016-03-26 21:55 1292人阅读 评论(1) 收藏

    最近在公司做项目,需要做两个版本,都是cs的,然后要求是一个单机版,自带数据库,另一个要进行局域网内的连接,所以公司的大牛设计是,局域网版的用sqlserver2008,单机版的则用sqlite.然后 ...

  10. 命令行的形式运行php

    转自:http://www.cnblogs.com/myjavawork/articles/1869205.html 注意:在安装php时需要将php 的安装目录加到环境变量 PATH 中 (右击我的 ...