用HTML5 Canvas API中的clearRect()方式完成橡皮擦作用

日期:2021-01-20 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

在实际全球中,大家应用画笔在画板勤奋行美术绘画;在html5 canvas中,大家一样可使用canvas的画笔——CanvasRenderingContext2D目标在canvas勤奋行美术绘画。大家都知道,大家的画笔1般都会与橡皮擦配套应用,便于于改正美术绘画全过程中的不正确并再次美术绘画。在html5 canvas中,CanvasRenderingContext2D目标也一样给大家出示了1个能够始终反复应用的橡皮擦——clearRect()方式。

XML/HTML Code拷贝內容到剪贴板
  1. clearRect(x, y, width, height)  

CanvasRenderingContext2D目标的clearRect()方式用于消除canvas内以特定座标点(x,y)为左上角、宽度为width、高宽比为height的矩形框地区中的全部图型像素。

下面,大家看来1个具体的事例。大家先绘图1个半径为50px的实心圆,随后应用橡皮擦clearRect()对在其中的部分地区开展擦除。绘图圆形的初始html5编码以下:

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF⑻">   
  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目标,以防在1些不适用html5的访问器中提醒英语的语法不正确   
  18. if(canvas.getContext){     
  19.     //获得对应的CanvasRenderingContext2D目标(画笔)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //绘图1个以座标点(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>  

对应的显示信息实际效果以下:

如今,大家应用clearRect()方式对实心圆中以圆心(100,100)为管理中心,附近各10px的矩形框地区一部分开展擦除。

JavaScript Code拷贝內容到剪贴板
  1. <script type="text/javascript">   
  2. //获得Canvas目标(画布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //简易地检验当今访问器是不是适用Canvas目标,以防在1些不适用html5的访问器中提醒英语的语法不正确   
  5. if(canvas.getContext){     
  6.     //获得对应的CanvasRenderingContext2D目标(画笔)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //绘图1个以座标点(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>  

对应的显示信息实际效果以下(是否有点像1个铜钱?)。


网页页面上大家能够擦除1片网页页面上的地区,让其显示信息出情况照片。
下面的事例中大家擦除矩形框中的空白让其显示信息网页页面情况:

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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?!赶紧换1个吧!!   
  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等候载入动漫实际效果 返回下一篇:没有了