<!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. 支付宝 python alipay 集成（转）

    即时到帐只是支付宝众多商家服务中的一个,表示客户付款,客户用支付宝付款,支付宝收到款项后,马上通知你,并且此笔款项与交易脱离关系,商家可以马上使用. 即时到帐只对企业客户服务,注册成功企业账号以后,申 ...

  2. 入职9月，旷视孙剑106分钟讲述CV创业科研的5大区别

    雷锋网按:本文为旷视科技首席科学家孙剑日前在 CCF-ADL上做的题为<如何在大公司和创业公司做好计算机视觉研究>的分享,主要介绍了近期计算机视觉的发展现状,ResNet基本原理和设计,旷 ...

  3. Java1.8新特性 - Stream流式算法

    一. 流式处理简介   在我接触到java8流式数据处理的时候,我的第一感觉是流式处理让集合操作变得简洁了许多,通常我们需要多行代码才能完成的操作,借助于流式处理可以在一行中实现.比如我们希望对一个包 ...

  4. day38 12-Spring的Bean的属性的注入：名称空间p

    xmlns="http://www.springframework.org/schema/beans"是默认的名称空间. xmlns:xsi="http://www.w3 ...

  5. 更新与发展 | Alibaba Cloud Linux 2 特性与开发细节揭秘

    2019 年 4 月,Alibaba Cloud Linux 2 (Aliyun Linux 2) 正式开源.时至今日,已经走过三个月的里程.在这段时间内,这个刚诞生不久的为阿里云 ECS 环境定制优 ...

  6. Mac上定时运行脚本工具--launchctl

    在Mac上可以像在Linux上一样,使用crontab来定时运行脚本,但苹果并不推荐这个方法.苹果推荐使用Launchctl来完成定时任务. 首先,我们先写一个可执行的脚本,列子为php脚本,名字为t ...

  7. Directx11教程(52) 实例(instancing)的简单应用

    原文:Directx11教程(52) 实例(instancing)的简单应用 有些时候,我们需要在场景中渲染大量的重复的物体,比如体育场中的观众,森林里面的树木等等,这些物体具有相似的形状,比如很多树 ...

  8. js表格上下移动添加删除

    html部分 <div onclick='fn()'>加</div> <table width="250" border="1" ...

  9. javaweb学习总结(一) - - JSP取得绝对路径

    在JavaWeb开发中,常使用绝对路径的方式来引入JavaScript和CSS文件,这样可以避免因为目录变动导致引入文件找不到的情况,常用的做法如下: 例如: 1 <!--使用绝对路径的方式引入 ...

  10. 【JZOJ4820】【NOIP2016提高A组模拟10.15】最大化

    题目描述 输入 输出 样例输入 3 2 4 0 -10 8 -2 -2 样例输出 4 数据范围 解法 枚举两条扫描线,在这两条扫描线之间的矩阵,可以将之转化为一个序列b[i]=a[i][1..m]. ...