<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }    

</style>

<script>

window.onload = function ()

{

    var oc = document.getElementById('c1');

    var ogc = oc.getContext('2d');

    var num = 0;

    setInterval(function (){

        num++;

        ogc.clearRect(0,0,oc.width,oc.height);

        ogc.fillRect(num,num,100,100);

        },20)

}

</script>

</head>

<body>

    <canvas id="c1" width="400" height="300">

        <span>请升级您的浏览器</span>

    </canvas>

</body>

</html>

html5 canvas 移动小方块的更多相关文章

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

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

  2. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

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

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

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

  4. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  5. 一款由html5 canvas实现五彩小圆圈背景特效

    之前介绍了好几款html5 canvas实现的特效.今天要为大家介绍一款由html5 canvas实现五彩小圆圈背景特效.五彩的小圆圈渐显渐失的特效.效果图如下: 在线预览   源码下载 html代码 ...

  6. HTML5 Canvas 奔跑的小狗

    效果如上图,共六个图像切换,形成小狗动态奔跑效果.完整代码和图片请从  https://files.cnblogs.com/files/xiandedanteng/runningDog.rar 下载. ...

  7. HTML5 Canvas小游戏基础：用户交互

    交互是游戏的根本.缺少了用户交互,游戏就不能称之为游戏,只能说是动画或电影.事件是浏览器响应用户交互操作的一种机制. 1．事件和事件执行 事件定义了用户与页面交互时产生的各种操作(主要通过鼠标或热键的 ...

  8. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

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

  9. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

随机推荐

  1. 如何将SD卡或者TF卡的debian系统刷入nand

    1. 在windows端下载辅助文件: a) http://dl.cubieforums.com/loz/boot_partition/bootloader/cubie_nand_uboot_part ...

  2. iOS9 class dump header

    获取系统私有API,网上有很多资料总结了一下就三种方式: 使用class-dump可以提取系统私有API列表 使用class-dump+DumpFrameworks.pl,这个可以一次性提取所有系统F ...

  3. UVALive 4043 Ants 蚂蚁（二分图最佳完美匹配，KM算法）

    题意: 有n个蚂蚁n棵树,蚂蚁与树要配对,在配对成功的一对之间连一条线段,要求所有线段不能相交.按顺序输出蚂蚁所匹配的树. 思路: 这个题目真是技巧啊,不能用贪心来为每个蚂蚁选择最近的树,这样很可能是 ...

  4. 【C#学习笔记】文本复制到粘贴板

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. EL&struts2标签 读取map,list集合

    struts中的取map和list & jsp中取map和list <% List list = new ArrayList(); list.add("a"); li ...

  6. phonegap 百度云推

    1 创建新工程 -----获取api key 和secret key 2,推送设置 3,新建安卓项目,并把应用包名 和 推送中设置的包名设置一致 4,下载百度云客户端sdk 5,解压,并添加libs文 ...

  7. 手动编译Spring4.2源码，以及把源码导入myEclipse中

    前提条件,先在本地配置好JDK1.8, 安装好Git 执行下面命令: 1,双击Git Bash, 进入源码存放路径 cd E:\Foler 2,git clone git@github.com:spr ...

  8. apple-touch-icon,shortcut icon和icon的区别

    apple-touch-icon 可以了解到这是一个类似网站favicon的图标文件,用来在iphone和ipod上创建快捷键时使用. 这个文件应当是png格式,57x57像素大小,放在网站根目录之下 ...

  9. Linux makefile教程之隐含规则九[转]

    隐含规则 ———— 在 我们使用Makefile时,有一些我们会经常使用,而且使用频率非常高的东西,比如,我们编译C/C++的源程序为中间目标文件(Unix下是[.o] 文件,Windows下是[.o ...

  10. 数组排序,字符串math,replace练习

    1. 关于数组排序     排序一直是程序设计中的热门话题.在js中,数组有个sort()方法.在不传参数默认情况下,数组的sort()方法原理是:对数每项调用toString()方法,比较字符串按升 ...