<!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. 取消mod_sofia的呼叫鉴权

    FreeSWITCH中默认的SIP呼叫是要鉴权的,流程如下. 终端 FreeSWITCH A -----Invite------> FS A <----Trying------ FS A ...

  2. maquee 无缝轮播

    页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...

  3. MVC--View Razor（1）

    (1)输出单一变量: 当前时间:@DateTime.Now (2)输入HTML:@:这是HTML项 (3)C#与HTML混合,输出多行HTML文本时 <text>html文本..</ ...

  4. iOS - OC 面向对象语法

    1.类 1)根类:因为类 NSObject 是层次结构的最顶层,因此称为根类. 可以将类称为子类(subclass)和父类(superclass),也可以将类称为子类和超类. 2)分类/类别(cate ...

  5. HTTP refere

    什么是 http refere ? 简言之,放在web浏览器的header上的 当我通过我的主页访问我朋友的网站时,就可以获得refere , 可以获取网页访问流量,也可以防盗链 一般 referer ...

  6. hdu4720Naive and Silly Muggles

    链接 一直理解的最小覆盖圆就是外接圆..原来还要分钝角和锐角... 钝角的话就为最长边的中点,对于这题分别枚举一下外接圆以及中点的圆,判一下是不是在园外. #include <iostream& ...

  7. JQuery Ajax 的简单使用

    简单判断用户名存在不存在,如果数据库存在此用户名,提示不能注册 前台代码如下: <!DOCTYPE html> <html lang="en"> <h ...

  8. Android 自定义Toast

    自定义Toast 其实就是自定义布局文件 感觉利用Dialog或者PopupWindow做也差不多 上图上代码 public class MainActivity extends Activity { ...

  9. 2015苹果WWDC开发者大会

    2015苹果WWDC开发者大会 (1)本届主题为“the epicenter of change(变革的中心)” (2)iOS 9.OS X.watchOS三款重要系统更新以及其他服务 (3)iOS ...

  10. MySQL 定时器EVENT学习

    原文:http://blog.csdn.net/lifuxiangcaohui/article/details/6583535 MySQL 定时器EVENT学习 MySQL从5.1开始支持event功 ...