Chinaunix首页 | 论坛 | 博客

stray82的ChinaUnix博客stray.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

stray82

  • 博客访问： 336345
  • 博文数量： 206
  • 博客积分： 1040
  • 博客等级： 少尉
  • 技术积分： 1756
  • 用 户 组： 普通用户
  • 注册时间： 2012-04-09 17:22
文章分类

全部博文（206）

文章存档

2015年（3）

2014年（147）

2013年（2）

2012年（54）

我的朋友
最近访客
推荐博文
canvas小案例

分类： HTML5

2014-02-11 15:15:29

1、方块移动

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>

  5. <style>
  6.         body{background:gray}
  7.     #c1{background:white}
  8.     span{color:white}
  9. </style>
  10. <script language="javascript">
  11. window.onload=function(){
  12.     var oc=document.getElementById('c1');
  13.     var ogc=oc.getContext('2d');
  14.     var num=0;
  15.     ogc.fillRect(0,0,100,100);
  16.     setInterval(function(){
  17.         num++;
  18.         ogc.clearRect(0,0,oc.width,oc.Height);
  19.         ogc.fillRect(num,num,100,100);
  20.         },30)
  21.     }
  22. </script>
  23. </head>
  24. <body>
  25. <canvas id="c1" width="400" height="400"></canvas>
  26. </body>
  27. </html>
2、随鼠标划线

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <style>
  5.     body{background:gray}
  6.     #c1{background:white}
  7.     span{color:white}
  8. </style>
  9. <script language="javascript">
  10. window.onload=function(){
  11.     var oc=document.getElementById('c1');
  12.     var ogc=oc.getContext('2d');
  13.     oc.onmousedown=function(ev){
  14.         var ev=ev||window.event;
  15.         ogc.moveTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);
  16.         document.onmousemove=function(ev){
  17.             var ev=ev||window.event;
  18.             ogc.lineTo(ev.clientX-oc.offsetLeft,ev.clientY-oc.offsetTop);
  19.             ogc.stroke();
  20.             };
  21.         document.onmouseup=function(){
  22.             document.onmouseup=null;
  23.             document.onmousemove=null;
  24.             };
  25.         }
  26.     }
  27. </script>
  28. </head>
  29. <body>
  30. <canvas id="c1" width="400" height="400"></canvas>
  31. </body>
  32. </html>
3、
阅读(348) | 评论(0) | 转发(0) |
0

上一篇：html5 canvas记录

下一篇：几个有用的jquery方法

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6