Canvas画板实现一个简单的球在盒子内随机移动效果

最新推荐文章于 2023-07-05 18:35:34 发布

_panda_

最新推荐文章于 2023-07-05 18:35:34 发布

阅读量5.6k

点赞数

分类专栏： web前端技术

web前端技术专栏收录该内容

68 篇文章 0 订阅

订阅专栏

HTML5入门之Canvas：如何用Canvas画板实现一个简单的球在盒子内随机移动效果

作者： html5Game | 时间：2014-2-25 17:05:14 | [ 小大] | 来源：HTML5 |

阅读：12457 |

评论： 0 |

HTML5 入门 Canvas 画板实现球简单盒子随机移动

[ 摘要]： HTML5提供了一个非常好的标签那就是Canvas！ Canvas元素用于在网页上绘制图形，Canvas画布是一个矩形区域，你可以控制其每一个像素。它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。今天我们就来讲讲如何通过Javascript在Canvas画布上实现一个球在固定盒子内随机移动的示例： 1、创建Canvas画板 HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id <canvas id="myCanvas" width="400" height="400"> 对不起，你的浏览器不支持Canvas标签！ </canvas> 2、实现方...

HTML5提供了一个非常好的标签那就是Canvas！

Canvas元素用于在网页上绘制图形，Canvas画布是一个矩形区域，你可以控制其每一个像素。它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

今天我们就来讲讲如何通过Javascript在Canvas画布上实现一个球在固定盒子内随机移动的示例：

HTML5入门之Canvas：如何用Canvas画板实现一个简单的球在盒子内随机移动效果

1、创建Canvas画板

HTML5内声明一个Canvas画板很简单，只需要这样在HTML页面内加入一个canvas标签即可，需要定义其大小和id

 
       1. 
       <canvas id="myCanvas" width="400" height="400">     
      
       2. 
       对不起，你的浏览器不支持Canvas标签！   
      
       3. 
       </canvas>

2、实现方案整理

要实现这样一个球在固定盒子内随机移动我们需要做到以下几点：

1）、画板大小固定；

2）、球大小固定且圆心位置随机；

3）、需要考虑球不出边界；

4）、通过setInterval(function(){},speed)方法实现时间间隔通过清空面板和重画模拟球的移动。

3、通过JavaScript操作画板

1）、初始化变量

 
       1. 
       //x和y为球的圆心坐标 
      
       2. 
       //speed:表示球移动的速度 单位为毫秒 
      
       3. 
       //radius:为球的半径 
      
       4. 
       //width和height为盒子大小 
      
       5. 
       var w, x,y, speed = 500, radius = 50, width = 400, height = 400;

2）、页面初始化绘制画板且设定时间间隔

 
       01. 
       //初始化 
      
       02. 
       function init() { 
      
       03. 
       drawCanvas(); 
      
       04. 
       setInterval(moveWheel, speed); 
      
       05. 
       } 
      
       06. 
         
       07. 
       //画盒子 
      
       08. 
       function drawCanvas() { 
      
       09. 
       //创建Canvas对象 
      
       10. 
       var c = document.getElementById("myCanvas"); 
      
       11. 
       var ctx = c.getContext("2d"); 
      
       12. 
       //在画布面板上面创建一个矩形 
      
       13. 
       ctx.fillStyle = "#000000"; //设置填充颜色值            
      
       14. 
       ctx.fillRect(0, 0, width, height); 
      
       15. 
       ctx.fill(); 
      
       16. 
         
       17. 
       w = ctx; 
      
       18. 
       }

3）、随机移动球的实现

 
       01. 
       //随机移动球 
      
       02. 
       function moveWheel() { 
      
       03. 
       clearCanvas(); 
      
       04. 
       drawCanvas(); 
      
       05. 
         
       06. 
       //获得随机坐标 
      
       07. 
       x = getRandomNum(); 
      
       08. 
       y = getRandomNum(); 
      
       09. 
         
       10. 
       //在画布上渲染一个圆形 
      
       11. 
       w.fillStyle = '#FFFFFF'; 
      
       12. 
       w.beginPath(); 
      
       13. 
       w.arc(x, y, radius, 0, Math.PI * 2, true); 
      
       14. 
       w.closePath(); 
      
       15. 
       w.fill();            
      
       16. 
       }

4）、获取随机坐标数据

 
       1. 
       //获取随机数 
      
       2. 
       function getRandomNum() { 
      
       3. 
       return Math.random() * (width - radius * 2) + radius; 
      
       4. 
       }

5）、清除画布

 
       1. 
       //清除画布 
      
       2. 
       function clearCanvas() { 
      
       3. 
       if (typeof w != "undefined") { 
      
       4. 
       w.clearRect(0, 0, width, height); 
      
       5. 
       } 
      
       6. 
       }

完整示例代码如下所示：

 
       01. 
       <!doctype html> 
      
       02. 
       <html> 
      
       03. 
       <head> 
      
       04. 
       <title>HTML5标签Canvas画布练习轮子滚动</title> 
      
       05. 
       <meta charset="UTF-8" />    
      
       06. 
       </head> 
      
       07. 
       <body onload="init();">    
      
       08. 
       <h1>Canvas 标签实现一个球限定在盒子内随机移动效果</h1> 
      
       09. 
       <canvas id="myCanvas" width="400" height="400">     
      
       10. 
       对不起，你的浏览器不支持Canvas标签！   
      
       11. 
       </canvas>    
      
       12. 
       <script type="text/javascript" language="javascript"> 
      
       13. 
       //x和y为球的圆心坐标 
      
       14. 
       //speed:表示球移动的速度 单位为毫秒 
      
       15. 
       //radius:为球的半径 
      
       16. 
       //width和height为盒子大小 
      
       17. 
       var w, x,y, speed = 500, radius = 50, width = 400, height = 400;      
      
       18. 
         
       19. 
       //初始化 
      
       20. 
       function init() { 
      
       21. 
       drawCanvas(); 
      
       22. 
       setInterval(moveWheel, speed); 
      
       23. 
       } 
      
       24. 
         
       25. 
       //画盒子 
      
       26. 
       function drawCanvas() { 
      
       27. 
       //创建Canvas对象 
      
       28. 
       var c = document.getElementById("myCanvas"); 
      
       29. 
       var ctx = c.getContext("2d"); 
      
       30. 
       //在画布面板上面创建一个矩形 
      
       31. 
       ctx.fillStyle = "#000000"; //设置填充颜色值            
      
       32. 
       ctx.fillRect(0, 0, width, height); 
      
       33. 
       ctx.fill(); 
      
       34. 
         
       35. 
       w = ctx; 
      
       36. 
       } 
      
       37. 
         
       38. 
       //随机移动球 
      
       39. 
       function moveWheel() { 
      
       40. 
       clearCanvas(); 
      
       41. 
       drawCanvas(); 
      
       42. 
         
       43. 
       //获得随机坐标 
      
       44. 
       x = getRandomNum(); 
      
       45. 
       y = getRandomNum(); 
      
       46. 
         
       47. 
       //在画布上渲染一个圆形 
      
       48. 
       w.fillStyle = '#FFFFFF'; 
      
       49. 
       w.beginPath(); 
      
       50. 
       w.arc(x, y, radius, 0, Math.PI * 2, true); 
      
       51. 
       w.closePath(); 
      
       52. 
       w.fill();            
      
       53. 
       } 
      
       54. 
         
       55. 
       //清除画布 
      
       56. 
       function clearCanvas() { 
      
       57. 
       if (typeof w != "undefined") { 
      
       58. 
       w.clearRect(0, 0, width, height); 
      
       59. 
       } 
      
       60. 
       } 
      
       61. 
         
       62. 
       //获取随机数 
      
       63. 
       function getRandomNum() { 
      
       64. 
       return Math.random() * (width - radius * 2) + radius; 
      
       65. 
       } 
      
       66. 
       </script> 
      
       67. 
       </body> 
      
       68. 
       </html>