<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>canvas绘图小实例之方块移动</title>
 <style>
 body{ background:#000;}
 #canvas1{ margin:100px 500px; background:#fff;}
 #canvas1 span{ color:#fff;}
 </style>
 <script>
 window.onload = function(){
     var oCanvas = document.getElementById('canvas1');
     var oContext = oCanvas.getContext('2d');    //获取绘图的2d环境
     var num = 0;

     //画一个方块
     oContext.fillStyle = 'red';
     oContext.fillRect(num,num,50,50);

     //开启定时器
     setInterval(function(){
         num++;
         //先清除之前的方块
         oContext.clearRect(0,0,oCanvas.width,oCanvas.height);
         //重新绘制方块
         oContext.fillRect(num,num,50,50);
     },30);

 }
 </script>
 </head>

 <body>
 <canvas id="canvas1" width="1000" height="1000">
     <span>该浏览器不支持canvas</span>
 </canvas>
 </body>
 </html>

HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动的更多相关文章

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

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

  2. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

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

  3. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  7. HTML5自学笔记[ 24 ]canvas绘图之星空草地

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  9. HTML5自学笔记[ 16 ]canvas绘图基础3

    canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量 旋转:rotate(弧度),弧度=角度*Mat ...

随机推荐

  1. 让PHP 5.3支持MSSQL连接

    最近在Windows Server 2008配置了PHP环境,想要连接SQL Server 2008,但是悲催的发现,从5.3开始,PHP自带的dll不再支持2000以后的MS SQL Server了 ...

  2. C# WPF MVVM 实战 – 4 - 善用 IValueConverter

    IValueConverter,做 WPF 的都应该接触过,把值换成 Visibility .Margin 等等是最常见的例子,也有很多很好的博文解释过用法.本文只是解释一下,MVVM 中一些情景. ...

  3. XAF应用开发教程(一) 创建项目

    XAF是DevExpress公司的快速开发框架,全称eXpress Application Framework,是企业信息系统的开发利器,快速开发效果显著,在.net框架中,笔者至今没有找到一款可以与 ...

  4. HttpServletRequest学习

    package cn.request; import java.io.IOException; import java.io.PrintWriter; import java.io.Unsupport ...

  5. CSS规范之BFC & IFC

    元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div>和<span& ...

  6. (四)主控板改IP，升级app，boot，mac

    给主控板升级boot要在boot界面进行,进入boot后,要先查看boot下ip和掩码是否和电脑ip(severip)在一个网段,不在的话要使用setenv命令设置ip地址和掩码.之后再输入upboo ...

  7. Lua了解 & 为什么游戏开发用Lua

    参考这篇文章 https://www.zhihu.com/question/21717567 看来就是网易风云为了让人写外挂不方便而采用的冷门语言.当然冷门的语言不代表不好用啦. Lua 虚拟机小,嵌 ...

  8. 使用Ant打包工具 基本介绍

    由于使用java,javac,jar等工具进行编译打包,即繁琐低效又容易出错,因此Ant出现了. Ant的出现就是专门为了打包编译java代码的,使用之前得稍微学一下.Ant的运行起来主要是依靠配置文 ...

  9. hdu 1081(最大子矩阵和)

    题目很简单,就是个最大子矩阵和的裸题,看来算法课本的分析后也差不多会做了.利用最大子段和的O(n)算法,对矩阵的行(或列)进行 i和j的枚举,对于第 i到j行,把同一列的元素进行压缩,得到一整行的一维 ...

  10. c++ char * const p问题

    事实上这个概念谁都有,只是三种声明方式非常相似很容易记混. Bjarne在他的The C++ Programming Language里面给出过一个助记的方法: 把一个声明从右向左读. char * ...