重生之毒妃梅果小说,管理书籍排行榜

主頁(yè) > 知識(shí)庫(kù) > 用HTML5 Canvas API中的clearRect()方法實(shí)現(xiàn)橡皮擦功能

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

在現(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)容到剪貼板

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)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用HTML5 clearRect()擦除指定的矩形區(qū)域的入門示例</title>
</head>
<body>
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標(biāo)簽。
</canvas>
<script type="text/javascript">
//獲取Canvas對(duì)象(畫(huà)布)
var canvas = document.getElementById("myCanvas");
//簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)
var ctx = canvas.getContext("2d");
//繪制一個(gè)以坐標(biāo)點(diǎn)(100,10)為圓心、半徑為50px的圓形
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
//繪制并填充圓形內(nèi)部
ctx.fill();
}
</script>
</body>
</html>

對(duì)應(yīng)的顯示效果如下：

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

JavaScript Code復(fù)制內(nèi)容到剪貼板

<script type="text/javascript">
//獲取Canvas對(duì)象(畫(huà)布)
var canvas = document.getElementById("myCanvas");
//簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)
var ctx = canvas.getContext("2d");
//繪制一個(gè)以坐標(biāo)點(diǎn)(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>

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

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

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？！趕快換一個(gè)吧！！
</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);
//清空畫(huà)布
context.clearRect(0,0,canvas.width,canvas.height);
};
</script>
</body>
</html>

標(biāo)簽：蘇州甘南萍鄉(xiāng) 文山紅河咸陽(yáng) 營(yíng)口惠州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《用HTML5 Canvas API中的clearRect()方法實(shí)現(xiàn)橡皮擦功能》，本文關(guān)鍵詞用,HTML5,Canvas,API,中的,clearRect,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。