<!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分组统计某列逗号隔开数据

    所有版本的oracle都可以使用select wm_concat(name) as name from user; 但如果是oracle11g,使用select listagg(name, ',') ...

  2. JS常用的腳本庫--包括在線編輯器

    原文链接 一.基本库 1.jQuery a.简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, F ...

  3. ZOJ 1015 Fishing Net（判断弦图）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=15 题意:给定一个图.判断是不是弦图? 思路:(1)神马是弦图?对于一 ...

  4. Maven初学

    先上几张霸气的图:

  5. UVA 12898 - And Or 数学

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  6. c++操作io常见命令

    用c++练习下 系统常见io命令. 1)显示文档的文本 2)统计文本单词数字 3)列出目录所有文件 ,递归思路 4)查找第一个匹配的字符. 5)文本单词排序, 快速排序,其实还是递归思路 6)文本单词 ...

  7. 14 Using Indexes and Clusters

    do not build indexes unless necessary. 索引是非常占资源的To maintain optimal performance, drop indexes that a ...

  8. 36个炫丽的html5 canvas展示

    36个炫丽的html5 canvas展示http://html6game.com/2013/08/03/36-behind-the-html5-canvas-show.shtml 16个最好的CSS3 ...

  9. 教你如何精通Struts：Tiles框架

    Tiles框架特性和内容 Tiles框架为创建Web页面提供了一种模板机制,它能将网页的布局和内容分离.它允许先创建模板,然后在运行时动态地将内容插入到模板中.Tiles 框架建立在JSP的inclu ...

  10. (三)uboot源码分析

    一.九鼎官方uboot和三星原版uboot对比(1)以九鼎官方的uboot为蓝本来学习的,以三星官方的这份为对照.(2)不同版本的uboot或者同一版本不同人移植的uboot,可能目录结构和文件内容都 ...