用HTML5 Canvas API中的clearRect()方法實現(xiàn)橡皮擦功能
簡書 發(fā)布時間：2016-03-15 11:24:02 作者：Airing 
我要評論
我要評論這篇文章主要介紹了如何用HTML5 Canvas API中的clearRect()方法實現(xiàn)橡皮擦功能,文中擦除頁面某片區(qū)域使其顯示出背景圖的例子非常實用,需要的朋友可以參考下
在現(xiàn)實世界中，我們使用畫筆在畫板上進行繪畫；在html5 canvas中，我們同樣可以使用canvas的畫筆——CanvasRenderingContext2D對象在canvas上進行繪畫。眾所周知，我們的畫筆一般都會與橡皮擦配套使用，以便于糾正繪畫過程中的錯誤并重新繪畫。在html5 canvas中，CanvasRenderingContext2D對象也同樣給我們提供了一個可以永遠重復(fù)使用的橡皮擦——clearRect()方法。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- clearRect(x, y, width, height)
CanvasRenderingContext2D對象的clearRect()方法用于清除canvas內(nèi)以指定坐標點(x,y)為左上角、寬度為width、高度為height的矩形區(qū)域中的所有圖形像素。
下面，我們來看一個實際的例子。我們先繪制一個半徑為50px的實心圓，然后使用橡皮擦clearRect()對其中的局部區(qū)域進行擦除。繪制圓形的原始html5代碼如下：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>使用HTML5 clearRect()擦除指定的矩形區(qū)域的入門示例</title>
- </head>
- <body>
- <!-- 添加canvas標簽，并加上紅色邊框以便于在頁面上查看 -->
- <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
- 您的瀏覽器不支持canvas標簽。
- </canvas>
- <script type="text/javascript">
- //獲取Canvas對象(畫布)
- var canvas = document.getElementById("myCanvas");
- //簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
- if(canvas.getContext){
- //獲取對應(yīng)的CanvasRenderingContext2D對象(畫筆)
- var ctx = canvas.getContext("2d");
- //繪制一個以坐標點(100,10)為圓心、半徑為50px的圓形
- ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
- //繪制并填充圓形內(nèi)部
- ctx.fill();
- }
- </script>
- </body>
- </html>
對應(yīng)的顯示效果如下：
現(xiàn)在，我們使用clearRect()方法對實心圓中以圓心(100,100)為中心，周邊各10px的矩形區(qū)域部分進行擦除。
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <script type="text/javascript">
- //獲取Canvas對象(畫布)
- var canvas = document.getElementById("myCanvas");
- //簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
- if(canvas.getContext){
- //獲取對應(yīng)的CanvasRenderingContext2D對象(畫筆)
- var ctx = canvas.getContext("2d");
- //繪制一個以坐標點(100,10)為圓心、半徑為50px的圓形
- ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
- //繪制并填充圓形內(nèi)部
- ctx.fill();
- //擦除矩形區(qū)域內(nèi)的圖形
- ctx.clearRect(90, 90, 20, 20);
- }
- </script>
對應(yīng)的顯示效果如下(是不是有點像一個銅錢？)。
頁面上我們可以擦除一片頁面上的區(qū)域，讓其顯示出背景圖片。
下面的例子中我們擦除了矩形中的空白讓其顯示頁面背景：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8">
- <title>clearRect()</title>
- <style>
- body { background: url("./images/bg2.jpg") repeat; }
- #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
- </style>
- </head>
- <body>
- <div id="canvas-warp">
- <canvas id="canvas">
- 你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
- </canvas>
- </div>
- <script>
- window.onload = function(){
- var canvas = document.getElementById("canvas");
- 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);
- };
- </script>
- </body>
- </html>
相關(guān)文章
- 這篇文章主要介紹了HTML5 Canvas繪制文本及圖片的基礎(chǔ)教程, 通過Canvas我們就可以用JavaScript制作出程序代碼可以輕松控制的文本和圖片數(shù)據(jù),需要的朋友可以參考下2016-03-14
- 這篇文章主要介紹了通過HTML5 Canvas API繪制弧線和圓形的教程,用JavaScript可以自定義弧度以及設(shè)定起始終末點,使用JavaScript需要的朋友可以參考下2016-03-14
借助HTML5 Canvas來繪制三角形和矩形等多邊形的方法
這篇文章主要介紹了借助HTML5 Canvas來繪制三角形和矩形等多邊形的方法,通過文章開頭給的一些屬性及下面三角形和矩形的例子,同理便可得出其他多邊形的畫法,需要的朋友可以2016-03-14- 這篇文章主要介紹了使用HTML5 Canvas繪制直線或折線等線條的方法講解,通過Canvas API我們便可以輕松地使用JavaScript來操作圖形的位置坐標,需要的朋友可以參考下2016-03-14
HTML5 canvas實現(xiàn)移動端上傳頭像拖拽裁剪效果
這篇文章主要為大家詳細介紹了HTML5 canvas實現(xiàn)移動端上傳頭像拖拽裁剪效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-14html5 canvas移動瀏覽器上實現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細介紹了html5 canvas移動瀏覽器上實現(xiàn)圖片壓縮上傳的相關(guān)方法，提出了解決方法，分享了解決問題的思路，感興趣的小伙伴們可以參考一下2016-03-11html5 canvas實現(xiàn)跟隨鼠標旋轉(zhuǎn)的箭頭
這篇文章主要為大家詳細介紹了html5 canvas實現(xiàn)跟隨鼠標旋轉(zhuǎn)的箭頭，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-11- 這篇文章主要為大家詳細介紹了HTML5 canvas實現(xiàn)雪花飄落特效，效果實現(xiàn)引人入勝，很逼真的動畫效果，感興趣的小伙伴們可以參考一下2016-03-08
HTML5+Canvas實現(xiàn)日期圓形時鐘特效源碼
HTML5+Canvas實現(xiàn)日期圓形時鐘特效源碼是一款可以全屏漂浮，帶有日期星期顯示的時鐘代碼，外觀非常漂亮，需要的朋友前來下載源碼2016-03-07- 這是一個款絢麗的HTML5 Canvas動畫，它將模擬的是我們生活中煙花綻放的動畫特效，效果非常逼真，下面我們來簡單分析一下實現(xiàn)這款HTML5煙花特效的過程及代碼，感興趣的小伙2016-03-02
