判斷當(dāng)刮到一半的時(shí)候层坠，自動(dòng)顯示全部?jī)?nèi)容
globalCompositeOperation
- 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)圖像物咳。
- source-over 使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合锣险。
像素
我們使用getImageData()能夠獲取指定區(qū)域的像素值ImageData
ImageData中3個(gè)屬性:width,height和data
width和height表示訪問(wèn)像素區(qū)域大小
data是一個(gè)包含訪問(wèn)區(qū)域所有像素信息的CanvasPixeArray
getImageData(x,y,width,height)
- 獲取像素,(x,y)像素區(qū)域原點(diǎn)坐標(biāo)
- width,height像素區(qū)域的寬度和高度"
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//目標(biāo)圖
context.beginPath();
context.fillStyle = "gray";
context.fillRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
context.fill();
context.globalCompositeOperation = "destination-out";
canvas.onmousedown = function(e){
var ev = window.event || e;
var x = ev.clientX - canvas.offsetLeft;
var y = ev.clientY - canvas.offsetTop;
context.beginPath();
context.moveTo(x,y);
canvas.onmousemove = function(e){
var ev = window.event || e;
var xx = ev.clientX - canvas.offsetLeft;
var yy = ev.clientY - canvas.offsetTop;
context.lineTo(xx,yy);
context.lineWidth = 30;
context.stroke();
all()
}
}
function all(){
var imageData = context.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight);
var count = 0;
for(var i = 0;i < imageData.data.length;i+=4){
if(imageData.data[i+3] == 0){
count++;
if(count >= imageData.data.length/16) {
context.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight);
}
}
}
}
document.onmouseup = function(){
canvas.onmousemove = "";
}
</script>
