溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“HTML5 Canvas怎么實現橡皮擦功能”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5 Canvas怎么實現橡皮擦功能”吧!
在現實世界中，我們使用畫筆在畫板上進行繪畫；在html5 canvas中，我們同樣可以使用canvas的畫筆——CanvasRenderingContext2D對象在canvas上進行繪畫。眾所周知，我們的畫筆一般都會與橡皮擦配套使用，以便于糾正繪畫過程中的錯誤并重新繪畫。在html5 canvas中，CanvasRenderingContext2D對象也同樣給我們提供了一個可以永遠重復使用的橡皮擦——clearRect()方法。
XML/HTML Code復制內容到剪貼板
clearRect(x, y, width, height)
CanvasRenderingContext2D對象的clearRect()方法用于清除canvas內以指定坐標點(x,y)為左上角、寬度為width、高度為height的矩形區域中的所有圖形像素。
下面，我們來看一個實際的例子。我們先繪制一個半徑為50px的實心圓，然后使用橡皮擦clearRect()對其中的局部區域進行擦除。繪制圓形的原始html5代碼如下：
JavaScript Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用HTML5 clearRect()擦除指定的矩形區域的入門示例</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){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//繪制一個以坐標點(100,10)為圓心、半徑為50px的圓形
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
//繪制并填充圓形內部
ctx.fill();
}
</script>
</body>
</html>
對應的顯示效果如下：
現在，我們使用clearRect()方法對實心圓中以圓心(100,100)為中心，周邊各10px的矩形區域部分進行擦除。
JavaScript Code復制內容到剪貼板
<script type="text/javascript">
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas");
//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
if(canvas.getContext){
//獲取對應的CanvasRenderingContext2D對象(畫筆)
var ctx = 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復制內容到剪貼板
<!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>
到此，相信大家對“HTML5 Canvas怎么實現橡皮擦功能”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
