App下載

在前端開發(fā)中怎么清除canvas畫布內(nèi)容?canvas清理案例詳解!

牛奶煮蘿莉 2021-08-19 11:14:13 瀏覽數(shù) (8944)
反饋

在之前說過有關(guān)于 html5 中 canvas的相關(guān)使用之后,越來越多人覺得canvas是屬于比較好用的,那么下面我們?cè)趤碚f有關(guān)于“在前端開發(fā)中怎么清除canvas畫布內(nèi)容?”這個(gè)問題的相關(guān)內(nèi)容分享!

清空canvas畫布內(nèi)容

1、重置寬或高

由于canvas每當(dāng)高度或?qū)挾缺恢卦O(shè)時(shí),畫布內(nèi)容就會(huì)被清空,因此可以用以下方法清空:(此方法僅限需要清除全部?jī)?nèi)容的情況):

var c=document.getElementById("myCanvas");  
c.width=c.width;

2、clearRect

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);

3、globalCompositeOperation

引用globalCompositeOperation()函數(shù),這個(gè)函數(shù)是用來在畫布上組合顏色,我們可以利用這個(gè)原理,疊加(數(shù)學(xué)上的"或"原理)來制作橡皮。

首先看看globalCompositeOperation屬性可以設(shè)置的值有哪些,分別是什么效果:

描述
source-over 默認(rèn)。在目標(biāo)圖像上顯示源圖像。
source-atop 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見的。
source-in 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示,目標(biāo)圖像是透明的。
source-out 在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分,目標(biāo)圖像是透明的。
destination-over 在源圖像上方顯示目標(biāo)圖像。
destination-atop 在源圖像頂部顯示目標(biāo)圖像。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示。
destination-in 在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會(huì)被顯示,源圖像是透明的。
destination-out 在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示,源圖像是透明的。
lighter 顯示源圖像 + 目標(biāo)圖像。
copy 顯示源圖像。忽略目標(biāo)圖像。
xor 使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合。

<!DOCTYPE html> <html> <head> <style> canvas { border:1px solid #d3d3d3; margin-right:10px; margin-bottom:20px; } </style> </head> <body> <script> var gco=new Array(); gco.push("source-atop"); gco.push("source-in"); gco.push("source-out"); gco.push("source-over"); gco.push("destination-atop"); gco.push("destination-in"); gco.push("destination-out"); gco.push("destination-over"); gco.push("lighter"); gco.push("copy"); gco.push("xor"); for (n=0;n<gco.length;n++) { document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>"); var c=document.createElement("canvas"); c.width=120; c.height=100; document.getElementById("p_" + n).appendChild(c); var ctx=c.getContext("2d"); ctx.fillStyle="blue"; ctx.fillRect(10,10,50,50); ctx.globalCompositeOperation=gco[n]; ctx.beginPath(); ctx.fillStyle="red"; ctx.arc(50,50,30,0,2*Math.PI); ctx.fill(); document.write("</div>"); } </script> </body> </html>

可以看出如果設(shè)置成destination-out,就可以清除canvas現(xiàn)有的像素點(diǎn)的圖像。

清除繪制到畫布上的線條(點(diǎn)擦除,線擦除)

  在我最近實(shí)現(xiàn)的項(xiàng)目中有畫筆功能, 同時(shí)畫筆畫出的線條可以被橡皮擦擦除,有點(diǎn)擦除和線擦除兩種方式。

  使用以上兩種方法也可以,但是如果這些線條不止繪制一次的話呢,中間有其他操作(例如繪制的內(nèi)容變換一次后)那上面的方法就不容易做到了,因?yàn)橐磸?fù)繪制存儲(chǔ)每次擦除后的數(shù)據(jù),簡(jiǎn)單的為了能達(dá)到該目的,可以將整個(gè)canvas畫布轉(zhuǎn)化成base64編碼的image,后面再次繪制的時(shí)候把這個(gè)image數(shù)據(jù)再繪制到canvas上,可以繼續(xù)在這個(gè)canvas上進(jìn)行繪制和擦除內(nèi)容。但是怎么樣也不好做到線擦除的功能了!

  下面介紹另外一種存儲(chǔ)繪制路徑點(diǎn)坐標(biāo)的方法去實(shí)現(xiàn)繪制線條后的點(diǎn)擦除和線擦除的功能。

  首先介紹下存儲(chǔ)線條的數(shù)據(jù)結(jié)構(gòu),之前寫的一篇《js實(shí)現(xiàn)存儲(chǔ)對(duì)象的數(shù)據(jù)結(jié)構(gòu)hashTable和list》大家可以先大致看看hash結(jié)構(gòu)的實(shí)現(xiàn),但是key和value快速查找的優(yōu)勢(shì)需要清楚。另外在canvas畫的各種形狀和線條,我們是如何知道點(diǎn)擊到哪個(gè)元素哪條線?《軟件項(xiàng)目技術(shù)點(diǎn)(4)——實(shí)現(xiàn)點(diǎn)擊畫布上元素》這篇博客里有說明實(shí)現(xiàn)原理。

1. 線條存儲(chǔ)及繪制

項(xiàng)目中我存儲(chǔ)的線條hash結(jié)構(gòu)的對(duì)象如下:

展開第一個(gè)線條key值為“#8c471a”的具體信息如下,value值其中有colorKey,lineColor,lineWidth,以及最重要的List結(jié)構(gòu)的points對(duì)象,是一個(gè)存儲(chǔ)了該線條所有點(diǎn)坐標(biāo)集合的List對(duì)象。

下面的一段代碼,實(shí)現(xiàn)了繪制該線條到畫布。使用二次貝塞爾函數(shù)使得繪制出來的線條流暢平滑沒有折痕,當(dāng)只有一個(gè)點(diǎn)時(shí)可繪制出一個(gè)圓點(diǎn)。

var count = this.points.length();
                var p: Core.Point = this.points.get(0);
                if (isDrawHit) {
                    ctx.strokeStyle = this.colorKey;
                }
                else {
                    ctx.strokeStyle = this.lineColor;
                }
                ctx.lineCap = "round";
                ctx.lineJoin = 'round';//轉(zhuǎn)折的時(shí)候不出現(xiàn)尖角
                if (ctx.canvas.id == "hitCanvas")
                    ctx.lineWidth = this.lineWidth + eraserRadius;//擴(kuò)大hit上線條的范圍,橡皮半徑
                else
                    ctx.lineWidth = this.lineWidth;
                ctx.beginPath();
                if (count >= 2) {
                    ctx.moveTo(p.x, p.y);
                    for (var i = 1; i < count - 2; i++) {
                        // p = this.points.get(i);
                        // ctx.lineTo(p.x, p.y);
                        if (this.points.get(i).x == this.points.get(i + 1).x && this.points.get(i).y == this.points.get(i + 1).y)
                            continue;
                        var c = (this.points.get(i).x + this.points.get(i + 1).x) / 2;
                        var d = (this.points.get(i).y + this.points.get(i + 1).y) / 2;
                        ctx.quadraticCurveTo(this.points.get(i).x, this.points.get(i).y, c, d); //二次貝塞曲線函數(shù)
                    }
                    // For the last 2 points
                    if (count >= 3) {
                        ctx.quadraticCurveTo(
                            this.points.get(i).x,
                            this.points.get(i).y,
                            this.points.get(i + 1).x,
                            this.points.get(i + 1).y
                        );
                    } else if (count >= 2) {
                        ctx.lineTo(this.points.get(1).x, this.points.get(1).y);
                    }
                    ctx.stroke();
                } else {
                    if (isDrawHit) {
                        ctx.fillStyle = this.colorKey;
                    }
                    else {
                        ctx.fillStyle = this.lineColor;
                    }
                    if (ctx.canvas.id == "hitCanvas")
                        var radius = this.lineWidth + eraserRadius;//擴(kuò)大hit上線條的范圍,橡皮半徑
                    else
                        var radius = this.lineWidth;
                    ctx.arc(this.points.get(0).x, this.points.get(0).y, radius, 0, 2 * Math.PI);
                    ctx.fill();
                }

 其中繪制到hitCanvas上的時(shí)候?qū)ineWidth擴(kuò)大加上了eraserRadius(圓形橡皮擦半徑),下圖即為繪制到hitCanvas上的colorKey顏色線條,每個(gè)線條顏色值是上圖中的key值colorKey。另外線條粗細(xì)明顯比上面的白色線條要粗很多,因?yàn)橄鹌げ潦莻€(gè)cur鼠標(biāo)樣式它的半徑很大,但獲取的鼠標(biāo)點(diǎn)擊位置還只是一個(gè)像素點(diǎn)坐標(biāo),所以為了擴(kuò)大鼠標(biāo)點(diǎn)到線條上的范圍將其變粗。

 2. 線擦除和點(diǎn)擦除

這樣線擦除就很容易實(shí)現(xiàn),只需要找到橡皮擦點(diǎn)到畫布上的坐標(biāo)點(diǎn)的色值,就其從hash集合中根據(jù)colorKey刪除掉該項(xiàng),即實(shí)現(xiàn)了刪除整條線。

點(diǎn)擦除就需要考慮到從兩端擦除或者從中間擦除的情況:

     if (that.isErasePoint) {
                      line.points.foreach(function (i, p) {
                          //橡皮擦距離該線條上點(diǎn)的距離是否在橡皮擦半徑范圍內(nèi)
                          if (Math.pow(p.x - point.x, 2) + Math.pow(p.y - point.y, 2) <= Math.pow(eraserRadius, 2)) {
                              isSeparate = true;
			      //已經(jīng)找到橡皮擦半徑范圍內(nèi)的點(diǎn),該點(diǎn)不存入兩個(gè)集合中的任何一個(gè)
                          } else {
                              if (isSeparate)
			      //找到后將之后的點(diǎn)存入另一個(gè)點(diǎn)集合points中
                                  points2.add(p);
                           else//找到之前將點(diǎn)存入點(diǎn)集合points1中
                                 points.add(p);
                         }
                     })
                     //遍歷完線條points上的所有點(diǎn)后。根據(jù)points1和points2是否為空處理點(diǎn)擦除后的線條
                    if (points1.length() >= 1 && points2.length() >= 1) {
		    //points1和points2都不為空,說明從中間擦除變?yōu)閮蓷l線
                         var preLine = editor.commonEditLogic.clonePenLine(line);
                        line.points = points1;
                         var linePen = editor.bdCanvas.elementFactory.createPenLine(point, line.lineWidth, line.lineColor);
                         linePen.points = points2;                                  
                           editor.bdCanvas.activeElement.setPenLine(linePen.colorKey, linePen);
                     } 
		     else if (points1.length() == 0 && points2.length() >= 1)
		     {
		           //從一端擦除
                         line.points = points2;
                     }
		     else if (points1.length() >= 1 && points2.length() == 0) 
		     {
		         //從一端擦除
                         line.points = points1;
                     } 
		     else if (points1.length() == 0 && points2.length() == 0)
		     {
		            //線條上的點(diǎn)全部被擦除,刪除該線條
                            editor.bdCanvas.activeElement.delPenLine(line.colorKey);               
			    }
                     editor.courseware.currentBlackboard.draw(false, true);
               }  

那么以上的代碼和文章描述就是有關(guān)于“在前端開發(fā)中怎么清除canvas畫布內(nèi)容?”這個(gè)問題的解決方法和實(shí)現(xiàn)方法分享,更多有關(guān)于html5 canvas的使用我們都可以在Canvas入門到項(xiàng)目實(shí)戰(zhàn)中購(gòu)買課程進(jìn)行入門到實(shí)踐的學(xué)習(xí)! 

0 人點(diǎn)贊