<!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. Django用户名密码错误提示

    from django.shortcuts import render # Create your views here. from django.shortcuts import render fr ...

  2. 2018.8.6 模拟赛 提高组B

    T1 Description 给定一个n个点m条边的有向图,有k个标记点,要求从规定的起点按任意顺序经过所有标记点到达规定的终点,问最短的距离是多少. Input 第一行5个整数n.m.k.s.t,表 ...

  3. 洛谷 2055 [ZJOI2009]假期的宿舍——二分图匹配

    题目:https://www.luogu.org/problemnew/show/P2055 #include<iostream> #include<cstdio> #incl ...

  4. hdu 2444 The Accomodation of Students(二分匹配 匈牙利算法 邻接表实现)

    The Accomodation of Students Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ( ...

  5. css Position 上下左中右布局

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  6. ASP.NET 自定义服务器控件

    文章内容   本文通过创建一个最简单的服务器控件,演示开发服务器端控件的流程. 文章内容整理自MSDN的编程指南,原文地址在文章末尾的资源中. 本文创建一个简单的服务器控件,名为 RedLabel.  ...

  7. Linux的概述与分类

    1．Linux的概述 Linux是基于Unix的开源免费的操作系统,由于系统的稳定性和安全性几乎成为程序代码运行的最佳系统环境.Linux是由Linus Torvalds(林纳斯·托瓦兹)起初开发的, ...

  8. KDD2015,Accepted Papers

    Accepted Papers by Session Research Session RT01: Social and Graphs 1Tuesday 10:20 am–12:00 pm | Lev ...

  9. Spark day06

    SparkStreaming简介 SparkStreaming是流式处理框架,是Spark API的扩展,支持可扩展.高吞吐量.容错的实时数据流处理,实时数据的来源可以是:Kafka, Flume, ...

  10. c++之手写strcmp

    int strcmp(const char* str1, const char*str2){ assert(str1 != NULL&&str2 != NULL); while (*s ...