DDR爱好者之家

用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
站长资源 2024/11/24 佚名
60 1538
DDR爱好者之家 Design By 杰米

在现实世界中，我们使用画笔在画板上进行绘画；在html5 canvas中，我们同样可以使用canvas的画笔——CanvasRenderingContext2D对象在canvas上进行绘画。众所周知，我们的画笔一般都会与橡皮擦配套使用，以便于纠正绘画过程中的错误并重新绘画。在html5 canvas中，CanvasRenderingContext2D对象也同样给我们提供了一个可以永远重复使用的橡皮擦——clearRect()方法。

XML/HTML Code复制内容到剪贴板
  1. clearRect(x, y, width, height)  

CanvasRenderingContext2D对象的clearRect()方法用于清除canvas内以指定坐标点(x,y)为左上角、宽度为width、高度为height的矩形区域中的所有图形像素。

下面，我们来看一个实际的例子。我们先绘制一个半径为50px的实心圆，然后使用橡皮擦clearRect()对其中的局部区域进行擦除。绘制圆形的原始html5代码如下：

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>使用HTML5 clearRect()擦除指定的矩形区域的入门示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 添加canvas标签，并加上红色边框以便于在页面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 您的浏览器不支持canvas标签。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //获取Canvas对象(画布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
  18. if(canvas.getContext){     
  19.     //获取对应的CanvasRenderingContext2D对象(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //绘制一个以坐标点(100,10)为圆心、半径为50px的圆形   
  23.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
  24.        
  25.     //绘制并填充圆形内部   
  26.     ctx.fill();      
  27. }   
  28. </script>   
  29. </body>   
  30. </html>  

对应的显示效果如下：
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

现在，我们使用clearRect()方法对实心圆中以圆心(100,100)为中心，周边各10px的矩形区域部分进行擦除。

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">   
  2. //获取Canvas对象(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误   
  5. if(canvas.getContext){     
  6.     //获取对应的CanvasRenderingContext2D对象(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //绘制一个以坐标点(100,10)为圆心、半径为50px的圆形   
  10.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
  11.        
  12.     //绘制并填充圆形内部   
  13.     ctx.fill();   
  14.        
  15.     //擦除矩形区域内的图形   
  16.     ctx.clearRect(90, 90, 20, 20);   
  17. }   
  18. </script>  

对应的显示效果如下(是不是有点像一个铜钱？)。
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能


页面上我们可以擦除一片页面上的区域，让其显示出背景图片。
下面的例子中我们擦除了矩形中的空白让其显示页面背景：

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>clearRect()</title>   
  6.     <style>   
  7.         body { background: url("./images/bg2.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //清空画布   
  28.         context.clearRect(0,0,canvas.width,canvas.height);   
  29.   
  30.     };   
  31. </script>   
  32. </body>   
  33. </html>  

用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米