<!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. oracle一列中的数据有多个手机号码用逗号隔开，我如何分别取出来？

    ID NUMBER1 137xxxx,138xxxx取出来成ID NUMBER1 137xxxx1 138xxxx create table test (id int, phone varchar2( ...

  2. .Net使用微軟自帶的用戶驗證和登錄授權

    使用微軟的用戶驗證,權限管理的方法 一.使用配置好的數據庫, 1.首先建立想定的數據庫(只填寫名字不加載任何表,如:Login數據庫) 2.使用vs兼容工具命令提示.如圖: 3.導入數據庫所需要的ta ...

  3. （转）eclipse 导入Android 项目 步骤

    1.打开eclipse 2. 点击File--选择-->Import,会出来图片,如图 3.按上面的点击android下的Existing Android...出来画面,如下图   4.点击Br ...

  4. css选择器选择顺序是从右往左的，为什么？

    https://segmentfault.com/q/1010000000713509 为什么 CSS 选择器解析的时候是从右往左? CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式. 首先 ...

  5. Java——Socket编程（一）

    1. 网络基础知识 两台机器之间需要进行通信,需要满足的条件: 每个机器有一个唯一的标识符(IP地址): 他们之间进行通信需要用同一种语言(协议): 每台主机上面有多个应用程序,如QQ,微博,迅雷等, ...

  6. jsp利用cookie记住用户名,下次登录时显示在文本框中（仅仅一个Cookie就整了将近三个小时，⊙﹏⊙b汗）

    <%@page import="java.net.URLDecoder"%> <%@page import="sun.security.util.Len ...

  7. Nessus基本命令

    /etc/init.d/nessusd start 启动nessusd服务 默认端口8834 添加用户(未知是什么用户) sudo /opt/nessus/sbin/nessus-adduser

  8. So easy Webservice 6.使用EndPoint发布webservice服务

    创建第一个Web服务: @WebService // 添加了此注解,代表是一个WebService public class HelloWorld { // 非 static final privat ...

  9. C++指针内存

    这是一个关于C++指针的问题,思考了一下 void GetMemory(char *p, int num){ p = (char*) malloc (sizeof(char) * num); } vo ...

  10. STRUTS2 嵌套循环

    <!--begin 类目循环 --> <s:iterator value="categories" id='i' begin="0" step ...