您好，欢迎来到奥特财经网。
科技 教育 生活 旅游 时尚 美容 美食 健康 体育 游戏 汽车 家电
搜索
您的当前位置：首页用HTML5CanvasAPI中的clearRect()方法实现橡皮擦功能_html5教程技巧

用HTML5CanvasAPI中的clearRect()方法实现橡皮擦功能_html5教程技巧

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

XML/HTML Code复制内容到剪贴板


    
 
  1. clearRect(x, y, width, height) 
    2. 





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


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


JavaScript Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.  
    5. 
 
  5. 使用HTML5 clearRect()擦除指定的矩形区域的入门示例 
    6. 
 
  6.  
    7. 
 
  7.  
    8. 
 
  8.  
    9. 
 
  9.  
    10. 
 
  10.  
    11. 
 
  11. 您的浏览器不支持canvas标签。 
    12. 
 
  12.  
    13. 
 
  13.  
    14. 
 
  14.  
    15. 
 
  15. //获取Canvas对象(画布) 
    16. 
 
  16. var canvas = document.getElementById("myCanvas"); 
    17. 
 
  17. //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误 
    18. 
 
  18. if(canvas.getContext){ 
    19. 
 
  19.  //获取对应的CanvasRenderingContext2D对象(画笔) 
    20. 
 
  20.  var ctx = canvas.getContext("2d"); 
    21. 
 
  21.  
    22. 
 
  22.  //绘制一个以坐标点(100,10)为圆心、半径为50px的圆形 
    23. 
 
  23.  ctx.arc(100, 100, 50, 0, Math.PI * 2, false); 
    24. 
 
  24.  
    25. 
 
  25.  //绘制并填充圆形内部 
    26. 
 
  26.  ctx.fill(); 
    27. 
 
  27. } 
    28. 
 
  28.  
    29. 
 
  29.  
    30. 
 
  30.  
    31. 





对应的显示效果如下：


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


JavaScript Code复制内容到剪贴板


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





对应的显示效果如下(是不是有点像一个铜钱？)。



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


JavaScript Code复制内容到剪贴板


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.   
    5. 
 
  5.  clearRect() 
    6. 
 
  6.   
    7. 
 
  7.  
    8. 
 
  8.  
    9. 
 
  9. "canvas-warp"> 
    10. 
 
  10.   
    11. 
 
  11.  你的浏览器居然不支持Canvas？！赶快换一个吧！！ 
    12. 
 
  12.   
    13. 
 
  13.  
    14. 
 
  14.  
    15. 
 
  15.  
    16. 
 
  16.  window.onload = function(){ 
    17. 
 
  17.  var canvas = document.getElementById("canvas"); 
    18. 
 
  18.  canvas.width = 800; 
    19. 
 
  19.  canvas.height = 600; 
    20. 
 
  20.  var context = canvas.getContext("2d"); 
    21. 
 
  21.  context.fillStyle = "#FFF"; 
    22. 
 
  22.  context.fillRect(0,0,800,600); 
    23. 
 
  23.  
    24. 
 
  24.  //清空画布 
    25. 
 
  25.  context.clearRect(0,0,canvas.width,canvas.height); 
    26. 
 
  26.  
    27. 
 
  27.  }; 
    28. 
 
  28.  
    29. 
 
  29.  
    30. 
 
  30.  
    31. 





 






奥特财经网还为您提供以下相关内容希望对您有帮助：



在Html5Canvas中,有几种清除屏幕的方法



重新设置高宽度 示例：/* 本示例使用jQuery描述 */var canvas = $('#myCanvas');  //选择要擦除的canvas元素var context = canvas.get(0).getContext('2d');  //获取canvas上下文//第一种方法擦除（clearRect方法）context.clearRect(0, 0, canvas.width(), canvas.height());//第二种方法擦除（重新设置高宽度）canvas.attr('width', canvas.wi...




html如何清除画面怎样去除画面



一、准备工作 1、新建一个文件夹example，在文件夹下准备以下四个文件，其中Penguins.jpg图片的原始尺寸为1024*768 2、img_img.html及p_img.html的内容分别如下图所示 二、通过标签引入图片 1、img>标签引入的图片可以直接在style中设置图片的大小img src="Penguins.jpg"/>注意：设置图片宽度时注释图...




html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码...



为了实现这个效果，你可以按照以下步骤进行操作。第一步是引入图片素材，定义两个canvas标签，并获取这两个canvas的上下文。接着，你需要定义一个函数来绘制图片，使用canvas绘图API中的drawImage方法。在绘制过程中，你需要关注图片的定位和动画效果。第二步是创建一个更新函数。因为我们需要让图片动起来，所...




Canvas的clip()的理解和使用



首先，通过给canvas初始化，可以达到特定的视觉效果。然后，在使用clip()方法进行裁剪时，可以定义出目标区域，使得在此区域之外的绘制操作不会影响到最终的输出结果。对于裁剪后的区域，绘制fillRect（0，0，500，400）仅对裁剪区域内的圆产生效果，而非整个画布。这说明clip()方法改变了绘图环境，所绘制...




JS如何实现网页任意区域截图功能?



实现网页任意区域截图功能可通过使用现成JavaScript库或基于HTML5 Canvas API自行开发两种方式完成，核心原理是利用Canvas的toDataURL()方法将选区内容转换为图像数据URL供下载。 以下是具体实现方案及步骤：一、使用现成JavaScript库（推荐）现成库封装了复杂的Canvas操作和图像处理逻辑，可快速实现功能，适合项目...




微信小程序实战教程之canvas绘画板+保存图片



在touchmove事件中，我们需要获取手指的当前位置，并使用canvas的绘图API将这个位置绘制到画布上。为了实现连贯的绘图效果，我们需要在每次绘制之前清空画布（使用ctx.clearRect()），然后重新绘制之前所有的点。三、绘图后如何保存 在微信小程序中，我们可以使用wx.canvasToTempFilePath方法将canvas的内容导出...




HTML5用canvas怎么实现动画效果



HTML5用canvas实现动画效果的方法：<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px;padding: 0px;} </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> window.requestAnimFrame = (function(callback) { return window.request...




html5中canvas对图片进行动画处理



返回值为定时器的ID值 赋值给一个变量 //clearInterval(idofsetInterval)取消由setInterval()方法设置的定时器。</script> <button onclick="tt=setInterval(fff,20);">开始</button> <button onclick="clearInterval(tt);">停止</button> </body> </html> </span> ...




网页上的放大镜怎么弄出来



按住Ctrl，然后用鼠标的滚动功能可以调整网页字的大小




关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中...



首先，你这个代码中最后的setInterval("draw()", 100);应该改为setInterval(draw, 100);第一个参数应该是方法名，虽然你那样写也会有效，但强烈建议不要那么写。然后你说你的代码只是在屏幕上闪一下，那么你在画的时候先调一下cxt.beginPath();画结束的时候掉一下cxt.closePaht();试试，这个w3c...

Copyright © 2019- atzq.com.cn 版权所有

违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务