精品国产日韩欧美,欧洲一区在线观看,亚欧洲精品在线视频免费观看

主頁 > 知識庫 > 用HTML5 Canvas API中的clearRect()方法實現橡皮擦功能

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

在現實世界中，我們使用畫筆在畫板上進行繪畫；在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 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 API中的clearRect()方法實現橡皮擦功能》，本文關鍵詞用,HTML5,Canvas,API,中的,clearRect,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。

婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

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