<!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. Spring 框架 详解 （一）

    Spring是分层的JavaSE/EE full-stack(一站式) 轻量级开源框架 * 分层: * SUN提供的EE的三层结构:web层.业务层.数据访问层(持久层,集成层) * Struts2是 ...

  2. 基础！winForm客户端最常用的几个基本属性

    客户端应用程序 - 是需要安装在用户电脑上才可以使用的程序特点:不需要联网也可以打开使用部分功能但是现在的情况是许多功能依然需要互联网的支持 代码部分在用户电脑上执行 WinForm常用窗体属性: 布 ...

  3. PHPwebshell分析

    这几天已知在做webshell的检测,JSP的不说了,特征检测起来很好匹配到,而且全是一家亲,互相模仿的居多. 今天看了一篇文章,看到14年蘑菇的webshell的后门然后很不错. ========= ...

  4. VSFTP基线安全

    在企业级的应用中,越来越多的企业应用开源的vsftpd软件来搭建自己的文件共享服务,优点是速度快且节省开支.然而,企业用户行为难以预料,配置稍有不当则会使该服务成为一个安全风险点,导致带宽恶意占用.用 ...

  5. 用t4模板和head.js进行css和js的版本控制

    head.js  介绍 http://headjs.com/site/api/v1.00.html#load 原文http://www.cnblogs.com/wang2650/p/5102690.h ...

  6. ARC 下处理内存暴涨的一个解决办法

    有一种情况: ; i < ; i++) { NSString *s = @"ABC"; s = [s lowercaseString]; s = [s stringByApp ...

  7. 2013 Multi-University Training Contest 6

    HDU-4655 Cut Pieces 题意:有N个格子能够被涂色,每个格子能够涂1-ai 种颜色,当N=6,涂色方案:112233 认为方案中共有3个颜色块:涂色方案:121212 认为方案中共有6 ...

  8. spring常用的工具类

    spring给我们提供了很多的工具类, 应该在我们的日常工作中很好的利用起来. 它可以大大的减轻我们的平时编写代码的长度. 因我们只想用spring的工具类, 而不想把一个大大的spring工程给引入 ...

  9. [转载] 文件系统vs对象存储——选型和趋势

    原文: http://www.testlab.com.cn/Index/article/id/1082.html#rd?sukey=fc78a68049a14bb2699b479d5e730f6f45 ...

  10. Codeforces 713C Sonya and Problem Wihtout a Legend

    题意:给一个序列,可以进行若干次操作,每次操作选择一个数让它+1或-1,问最少要几次操作使得序列变为严格单调递增序列. 题解:首先考虑非严格递增序列,则每个数字最终变成的数字一定是该数组中的某个数.那 ...