HTML5Canvas怎么實(shí)現(xiàn)橡皮擦功能

本篇內(nèi)容主要講解“HTML5 Canvas怎么實(shí)現(xiàn)橡皮擦功能”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“HTML5 Canvas怎么實(shí)現(xiàn)橡皮擦功能”吧!

成都創(chuàng)新互聯(lián)公司是專業(yè)的義安網(wǎng)站建設(shè)公司，義安接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行義安網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

在現(xiàn)實(shí)世界中，我們使用畫筆在畫板上進(jìn)行繪畫；在html5 canvas中，我們同樣可以使用canvas的畫筆——CanvasRenderingContext2D對(duì)象在canvas上進(jìn)行繪畫。眾所周知，我們的畫筆一般都會(huì)與橡皮擦配套使用，以便于糾正繪畫過(guò)程中的錯(cuò)誤并重新繪畫。在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ì)象(畫布)
var canvas = document.getElementById("myCanvas");
//簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫筆)
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)的顯示效果如下：
HTML5 Canvas怎么實(shí)現(xiàn)橡皮擦功能

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

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

<script type="text/javascript">
//獲取Canvas對(duì)象(畫布)
var canvas = document.getElementById("myCanvas");
//簡(jiǎn)單地檢測(cè)當(dāng)前瀏覽器是否支持Canvas對(duì)象，以免在一些不支持html5的瀏覽器中提示語(yǔ)法錯(cuò)誤
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫筆)
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è)銅錢？)。
HTML5 Canvas怎么實(shí)現(xiàn)橡皮擦功能

頁(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);
//清空畫布
context.clearRect(0,0,canvas.width,canvas.height);
};
</script>
</body>
</html>

HTML5 Canvas怎么實(shí)現(xiàn)橡皮擦功能

到此，相信大家對(duì)“HTML5 Canvas怎么實(shí)現(xiàn)橡皮擦功能”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)頁(yè)標(biāo)題：HTML5Canvas怎么實(shí)現(xiàn)橡皮擦功能
網(wǎng)站路徑：http://muchs.cn/article38/jehgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、軟件開發(fā)、企業(yè)網(wǎng)站制作、云服務(wù)器、Google、用戶體驗(yàn)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容