| 值 | 描述 |
|---|---|
| source-over | 默認(rèn)。在目標(biāo)圖像上顯示源圖像。 |
| source-atop | 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見(jiàn)的。 |
| 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)的圖像。
清除繪制到畫(huà)布上的線(xiàn)條（點(diǎn)擦除，線(xiàn)擦除）
在我最近實(shí)現(xiàn)的項(xiàng)目中有畫(huà)筆功能， 同時(shí)畫(huà)筆畫(huà)出的線(xiàn)條可以被橡皮擦擦除，有點(diǎn)擦除和線(xiàn)擦除兩種方式。
使用以上兩種方法也可以，但是如果這些線(xiàn)條不止繪制一次的話(huà)呢，中間有其他操作（例如繪制的內(nèi)容變換一次后）那上面的方法就不容易做到了，因?yàn)橐磸?fù)繪制存儲(chǔ)每次擦除后的數(shù)據(jù)，簡(jiǎn)單的為了能達(dá)到該目的，可以將整個(gè)canvas畫(huà)布轉(zhuǎn)化成base64編碼的image，后面再次繪制的時(shí)候把這個(gè)image數(shù)據(jù)再繪制到canvas上，可以繼續(xù)在這個(gè)canvas上進(jìn)行繪制和擦除內(nèi)容。但是怎么樣也不好做到線(xiàn)擦除的功能了！
下面介紹另外一種存儲(chǔ)繪制路徑點(diǎn)坐標(biāo)的方法去實(shí)現(xiàn)繪制線(xiàn)條后的點(diǎn)擦除和線(xiàn)擦除的功能。
首先介紹下存儲(chǔ)線(xiàn)條的數(shù)據(jù)結(jié)構(gòu)，之前寫(xiě)的一篇《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畫(huà)的各種形狀和線(xiàn)條，我們是如何知道點(diǎn)擊到哪個(gè)元素哪條線(xiàn)？《軟件項(xiàng)目技術(shù)點(diǎn)(4)——實(shí)現(xiàn)點(diǎn)擊畫(huà)布上元素》這篇博客里有說(shuō)明實(shí)現(xiàn)原理。
1. 線(xiàn)條存儲(chǔ)及繪制
項(xiàng)目中我存儲(chǔ)的線(xiàn)條hash結(jié)構(gòu)的對(duì)象如下：
展開(kāi)第一個(gè)線(xiàn)條key值為“#8c471a”的具體信息如下，value值其中有colorKey，lineColor，lineWidth，以及最重要的List結(jié)構(gòu)的points對(duì)象，是一個(gè)存儲(chǔ)了該線(xiàn)條所有點(diǎn)坐標(biāo)集合的List對(duì)象。
下面的一段代碼，實(shí)現(xiàn)了繪制該線(xiàn)條到畫(huà)布。使用二次貝塞爾函數(shù)使得繪制出來(lái)的線(xiàn)條流暢平滑沒(méi)有折痕，當(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上線(xiàn)條的范圍，橡皮半徑
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); //二次貝塞曲線(xiàn)函數(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上線(xiàn)條的范圍，橡皮半徑
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顏色線(xiàn)條，每個(gè)線(xiàn)條顏色值是上圖中的key值colorKey。另外線(xiàn)條粗細(xì)明顯比上面的白色線(xiàn)條要粗很多，因?yàn)橄鹌げ潦莻€(gè)cur鼠標(biāo)樣式它的半徑很大，但獲取的鼠標(biāo)點(diǎn)擊位置還只是一個(gè)像素點(diǎn)坐標(biāo)，所以為了擴(kuò)大鼠標(biāo)點(diǎn)到線(xiàn)條上的范圍將其變粗。
2. 線(xiàn)擦除和點(diǎn)擦除
這樣線(xiàn)擦除就很容易實(shí)現(xiàn)，只需要找到橡皮擦點(diǎn)到畫(huà)布上的坐標(biāo)點(diǎn)的色值，就其從hash集合中根據(jù)colorKey刪除掉該項(xiàng)，即實(shí)現(xiàn)了刪除整條線(xiàn)。
點(diǎn)擦除就需要考慮到從兩端擦除或者從中間擦除的情況：
if (that.isErasePoint) {
line.points.foreach(function (i, p) {
//橡皮擦距離該線(xiàn)條上點(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);
}
})
//遍歷完線(xiàn)條points上的所有點(diǎn)后。根據(jù)points1和points2是否為空處理點(diǎn)擦除后的線(xiàn)條
if (points1.length() >= 1 && points2.length() >= 1) {
//points1和points2都不為空，說(shuō)明從中間擦除變?yōu)閮蓷l線(xiàn)
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)
{
//線(xiàn)條上的點(diǎn)全部被擦除，刪除該線(xiàn)條
editor.bdCanvas.activeElement.delPenLine(line.colorKey);
}
editor.courseware.currentBlackboard.draw(false, true);
}
到此這篇關(guān)于清除canvas畫(huà)布內(nèi)容(點(diǎn)擦除+線(xiàn)擦除)的文章就介紹到這了,更多相關(guān)canvas畫(huà)布清除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
標(biāo)簽：池州 漯河 新疆 永州 遼源 棗莊 西藏 青島
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《清除canvas畫(huà)布內(nèi)容(點(diǎn)擦除+線(xiàn)擦除)》，本文關(guān)鍵詞 清除,canvas,畫(huà)布,內(nèi)容,點(diǎn),；如發(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)。