用HTML5 Canvas API中的clearRect()方法實現橡皮擦功能

2020-03-24 18:09:11

字體：大中小

來源：轉載

供稿：網友

在現實世界中，我們使用畫筆在畫板上進行繪畫；在html5 canvas中，我們同樣可以使用canvas的畫筆 CanvasRenderingContext2D對象在canvas上進行繪畫。眾所周知，我們的畫筆一般都會與橡皮擦配套使用，以便于糾正繪畫過程中的錯誤并重新繪畫。在html5 canvas中，CanvasRenderingContext2D對象也同樣給我們提供了一個可以永遠重復使用的橡皮擦 clearRect()方法。XML/HTML Code復制內容到剪貼板
CanvasRenderingContext2D對象的clearRect()方法用于清除canvas內以指定坐標點(x,y)為左上角、寬度為width、高度為height的矩形區域中的所有圖形像素。下面，我們來看一個實際的例子。我們先繪制一個半徑為50px的實心圓，然后使用橡皮擦clearRect()對其中的局部區域進行擦除。繪制圓形的原始html5代碼如下：JavaScript Code復制內容到剪貼板
metacharset= UTF-8 title 使用HTML5clearRect()擦除指定的矩形區域的入門示例 /title /head body !--添加canvas標簽，并加上紅色邊框以便于在頁面上查看-- canvasid= myCanvas width= 400px height= 300px >對應的顯示效果如下：
現在，我們使用clearRect()方法對實心圓中以圓心(100,100)為中心，周邊各10px的矩形區域部分進行擦除。JavaScript Code復制內容到剪貼板
//獲取Canvas對象(畫布) varcanvas=document.getElementById( myCanvas ); //簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤 if(canvas.getContext){ //獲取對應的CanvasRenderingContext2D對象(畫筆) varctx=canvas.getContext( 2d ); //繪制一個以坐標點(100,10)為圓心、半徑為50px的圓形 ctx.arc(100,100,50,0,Math.PI*2,false); //繪制并填充圓形內部 ctx.fill(); //擦除矩形區域內的圖形 ctx.clearRect(90,90,20,20); } /script
對應的顯示效果如下(是不是有點像一個銅錢？)。

頁面上我們可以擦除一片頁面上的區域，讓其顯示出背景圖片。
下面的例子中我們擦除了矩形中的空白讓其顯示頁面背景：JavaScript Code復制內容到剪貼板
style body{background:url( ./images/bg2.jpg )repeat;} #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;} /style /head body divid= canvas-warp canvasid= canvas 你的瀏覽器居然不支持Canvas？！趕快換一個吧！！ /canvas /div script window.onload=function(){ varcanvas=document.getElementById( canvas ); canvas.width=800; canvas.height=600; varcontext=canvas.getContext( 2d ); context.fillStyle= #FFF ; context.fillRect(0,0,800,600); //清空畫布 context.clearRect(0,0,canvas.width,canvas.height); }; /script /body /htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：nginx配置訪問圖片路徑以及html靜態頁面的調取方法

下一篇：HTML5 canvas基本繪圖之繪制線條