<!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. Perl文件读写

    Perl File Handling: open, read, write and close files #==================== Opening files Solution 1 ...

  2. [Golang]实习最后一天小纪念＋并发爬虫小练习

    今天是我在公司实习的最后一天,一个月的时间真的是太短暂了,我非常享受在公司工作的这一个月,在这里Leader和同事们对我的帮助极大地促进了我技术水平的进步和自信心的提升,我发自内心地感谢白山云科技给我 ...

  3. Css中光标,DHTML,缩放的使用

    Css中光标的使用: 属性名称                属性值                                         说明cursor                 ...

  4. 用Maven插件生成Mybatis代码

    现在代码管理基本上是采用Maven管理,Maven的好处此处不多说,大家用百度搜索会有很多介绍,本文介绍一下用Maven工具如何生成Mybatis的代码及映射的文件. 一.配置Maven pom.xm ...

  5. sass 常用函数的整理

    @charset "utf-8"; @import "compass/css3/inline-block"; @import "compass/css ...

  6. Uva 10382 (区间覆盖) Watering Grass

    和 Uva 10020几乎是一样的,不过这里要把圆形区域转化为能够覆盖的长条形区域(一个小小的勾股定理) 学习一下别人的代码,练习使用STL的vector容器 这里有个小技巧,用一个微小量EPS来弥补 ...

  7. HDFS 整体把握

    对于HDFS这样一个分布式文件系统,它的目的是为了实现在多台廉价X86服务器上实现大文件存储.     HDFS 是仿造GFS 设计出来的. 如图所示, 这种实现方案是一种采取有一个中心节点, 多个数 ...

  8. [转]Git介绍

    Git是一个分布式的版本控制工具,本篇文章从介绍Git开始,重点在于介绍Git的基本命令和使用技巧,让你尝试使用Git的同时,体验到原来一个版 本控制工具可以对开发产生如此之多的影响,文章分为两部分, ...

  9. python - 简明 性能测试

    简洁测试: # python -m cProfile test.py 代码注入: # -*- coding: utf-8 -*- class test(object): pass class test ...

  10. Cython: 快速入门

    1. Cython是什么? 它是一个用来快速生成Python扩展模块(extention module)的工具,语法是Python和c的混血.在Cython,C里的类型,如int,float,long ...