用HTML5 Canvas API中的clearRect()方法實作橡皮擦功能_html5教學技巧

在現實世界中，我們使用畫筆在畫板上進行繪畫；在html5 canvas中，我們同樣可以使用canvas的畫筆－CanvasRenderingContext2D物件在canvas上進行繪畫。眾所周知，我們的畫筆通常會與橡皮擦配套使用，以便於糾正繪畫過程中的錯誤並重新繪畫。在html5 canvas中，CanvasRenderingContext2D物件也同樣提供了一個可以永遠重複使用的橡皮擦－clearRect()方法。

XML/HTML Code複製內容到剪貼簿

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

CanvasRenderingContext2D物件的c​​learRect()方法用於清除canvas內以指定座標點(x,y)為左上角、寬度為width、高度為height的矩形區域中的所有圖形像素。

下面，我們來看一個實際的例子。我們先繪製一個半徑為50px的實心圓，然後使用橡皮擦clearRect()對其中的局部區域進行擦除。繪製圓形的原始html5程式碼如下：

JavaScript Code複製內容到剪貼簿

1. html>   
2.   
3.   
4. "UTF-8">   
5.   
6.   
7.   
8.   
9.   
10. "myCanvas" width="400px""400px" style="border: 1px solid red;">   
11. 您的瀏覽器不支援canvas標籤。   
12.   
13.   
15. //取得Canvas物件(畫布)   
16. var canvas = document.getElementById("myCanvas"
17. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤   
18. if(canvas.getContext){     
19.     //取得對應的CanvasRenderingContext2D物件(畫筆)   
20.     var ctx = canvas.getContext("2d";
       
    
22. //繪製一個以座標點(100,10)為圓心、半徑50px的圓形   
23.     ctx.arc(100, 100, 50, 0, Math.PI * 2, false       
24.     
25. //繪製並填入圓形內部        ctx.fill();      
26. }   
27.   
28.   
29.   

對應的顯示效果如下：

現在，我們使用clearRect()方法對實心圓中以圓心(100,100)為中心，週邊各10px的矩形區域部分進行擦除。

JavaScript Code

複製內容到剪貼簿

1. <script><span class="string">"text/javascript"</script>>   
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的圓形   
    ctx.arc(100, 100, 50, 0, Math.PI * 2, 
10. false       
11.     
//繪製並填入圓形內部
12.        ctx.fill();   
13.        
14.     
//擦除長方形區域內的圖形
15.        ctx.clearRect(90, 90, 20, 20);   
16. }   
17.   
對應的顯示效果如下(是不是有點像一個銅錢？)。

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

JavaScript Code

複製內容到剪貼簿

1. html>;   
2. "zh">   
3.   
4.      "UTF-8">;   
5.     ;   
6.        
7.         正文 { 背景： url("./images/bg2.jpg")         #canvas { 邊框：1px solid #aaaaaa; 顯示：區塊； 邊距：50px 自動
8.     樣式>    頭>   
9.   
10. "canvas-warp"
11. >   
12.     「畫布」>   
13.         你的瀏覽器居然不支援Canvas？ ！趕緊換一個吧！ ！           

  

  

  

    window.onload = 函數

(){   

        var canvas = document.getElementById(">

        canvas.width = 800;            canvas.height = 600;            var

 context = canvas.getContext("2d"

>

        context.fillStyle = 

"#FFF"

;    ;            context.fillRect(0,0,800,600);   

           

//清除兼職

  

        context.clearRect(0,0,canvas.width,canvas.height);   

       }；   

腳本>