亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用HTML5 Canvas API中的clearRect()方法實(shí)現(xiàn)橡皮擦功能

簡(jiǎn)書(shū)   發(fā)布時(shí)間：2016-03-15 11:24:02   作者：Airing   我要評(píng)論
這篇文章主要介紹了如何用HTML5 Canvas API中的clearRect()方法實(shí)現(xiàn)橡皮擦功能,文中擦除頁(yè)面某片區(qū)域使其顯示出背景圖的例子非常實(shí)用,需要的朋友可以參考下

在現(xiàn)實(shí)世界中，我們使用畫(huà)筆在畫(huà)板上進(jìn)行繪畫(huà)；在html5 canvas中，我們同樣可以使用canvas的畫(huà)筆——CanvasRenderingContext2D對(duì)象在canvas上進(jìn)行繪畫(huà)。眾所周知，我們的畫(huà)筆一般都會(huì)與橡皮擦配套使用，以便于糾正繪畫(huà)過(guò)程中的錯(cuò)誤并重新繪畫(huà)。在html5 canvas中，CanvasRenderingContext2D對(duì)象也同樣給我們提供了一個(gè)可以永遠(yuǎn)重復(fù)使用的橡皮擦——clearRect()方法。

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. clearRect(x, y, width, height)  

CanvasRenderingContext2D對(duì)象的clearRect()方法用于清除canvas內(nèi)以指定坐標(biāo)點(diǎn)(x,y)為左上角、寬度為width、高度為height的矩形區(qū)域中的所有圖形像素。

下面，我們來(lái)看一個(gè)實(shí)際的例子。我們先繪制一個(gè)半徑為50px的實(shí)心圓，然后使用橡皮擦clearRect()對(duì)其中的局部區(qū)域進(jìn)行擦除。繪制圓形的原始html5代碼如下：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <title>使用HTML5 clearRect()擦除指定的矩形區(qū)域的入門(mén)示例</title>   
  6. </head>   
  7. <body>   
  8.   
  9. <!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁(yè)面上查看 -->   
  10. <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">   
  11. 您的瀏覽器不支持canvas標(biāo)簽。   
  12. </canvas>   
  13.   
  14. <script type="text/javascript">   
  15. //獲取Canvas對(duì)象(畫(huà)布)   
  16. var canvas = document.getElementById("myCanvas");   
  17. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  18. if(canvas.getContext){     
  19.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)   
  20.     var ctx = canvas.getContext("2d");   
  21.        
  22.     //繪制一個(gè)以坐標(biāo)點(diǎn)(100,10)為圓心、半徑為50px的圓形   
  23.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
  24.        
  25.     //繪制并填充圓形內(nèi)部   
  26.     ctx.fill();      
  27. }   
  28. </script>   
  29. </body>   
  30. </html>  

對(duì)應(yīng)的顯示效果如下：
2016315111842196.png (421×312)

現(xiàn)在，我們使用clearRect()方法對(duì)實(shí)心圓中以圓心(100,100)為中心，周邊各10px的矩形區(qū)域部分進(jìn)行擦除。

JavaScript Code復(fù)制內(nèi)容到剪貼板
  1. <script type="text/javascript">   
  2. //獲取Canvas對(duì)象(畫(huà)布)   
  3. var canvas = document.getElementById("myCanvas");   
  4. //簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤   
  5. if(canvas.getContext){     
  6.     //獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)   
  7.     var ctx = canvas.getContext("2d");   
  8.        
  9.     //繪制一個(gè)以坐標(biāo)點(diǎn)(100,10)為圓心、半徑為50px的圓形   
  10.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false);   
  11.        
  12.     //繪制并填充圓形內(nèi)部   
  13.     ctx.fill();   
  14.        
  15.     //擦除矩形區(qū)域內(nèi)的圖形   
  16.     ctx.clearRect(90, 90, 20, 20);   
  17. }   
  18. </script>  

對(duì)應(yīng)的顯示效果如下(是不是有點(diǎn)像一個(gè)銅錢(qián)？)。
2016315111914378.png (417×320)


頁(yè)面上我們可以擦除一片頁(yè)面上的區(qū)域，讓其顯示出背景圖片。
下面的例子中我們擦除了矩形中的空白讓其顯示頁(yè)面背景：

JavaScript Code復(fù)制內(nèi)容到剪貼板
  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？！趕快換一個(gè)吧??！   
  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.         //清空畫(huà)布   
  28.         context.clearRect(0,0,canvas.width,canvas.height);   
  29.   
  30.     };   
  31. </script>   
  32. </body>   
  33. </html>  

2016315111932638.jpg (1235×714)

相關(guān)文章

最新評(píng)論