通過鼠標移動事件

改變封面圖片透明度發現隱藏的圖像我寫了一些簡單的代碼來改變封面圖片的透明度，揭示隱藏的圖片下it.there兩個帆布一個在other.both的頂部是500x500.both的畫布有一個圖像。在這裏我改變了鼠標移動事件的封面圖像的不透明度，以便隱藏圖像可見。我使用e.layerX/Y獲取座標。我可以管理一個像素一個像素的不透明度操作使用這不是用戶友好通過鼠標移動事件

function change_opacity(e){ 
    if(checked){ 
    var imageData=ctx2.getImageData(e.layerX,e.layerY,10,10); 
    for(i=3;i<imageData.data.length;i+=4){ 
    imageData.data[i]=0; 


    } 

    ctx2.putImageData(imageData,e.layerX,e.layerY); 
    } 

}

我希望它做的不透明度變化對每個鼠標移動一定的圓形截面。我怎樣才能做到這一點？

image for canvas1

image for canvas2

全碼：

<html> 
    <head> 
    <style> 
    *{margin:0px;padding:0px;} 
    #canvas1{ 
    position:absolute; 
    top:51px; 
    left:200px; 
    border:1px solid black; 
    } 
    #canvas2{ 
    position :absolute; 
    top:50px; 
    left:200px; 
    border:1px solid black; 

    } 
    </style> 
    </head> 
    <body> 
    <canvas id="canvas1" width="500" height="500"></canvas> 
    <canvas id="canvas2" width="500" height="500"></canvas> 
    <script> 
    function makeit(){ 
    var checked=false; 
    var canvas1=document.getElementById('canvas1'); 
    var canvas2=document.getElementById('canvas2'); 
    var ctx1=canvas1.getContext('2d'); 
    var ctx2=canvas2.getContext('2d'); 
    var img1=new Image(); 
    img1.src="car1.jpg"; 

    img1.onload=function(){ 
    ctx1.drawImage(img1,0,0); 
    } 
    var img2=new Image(); 
    img2.src="car2.jpg"; 

    img2.onload=function(){ 
    ctx2.drawImage(img2,0,0); 
    } 
    canvas2.addEventListener('mousedown',check,false); 
    canvas2.addEventListener('mousemove',change_opacity,false); 
    canvas2.addEventListener('mouseup',uncheck,false); 
    function check(){ 
    checked=true; 
    } 
    function uncheck(e){ 
     checked=false; 
    } 
function change_opacity(e){ 
    if(checked){ 
    var imageData=ctx2.getImageData(e.layerX,e.layerY,10,10); 
    for(i=3;i<imageData.data.length;i+=4){ 
    imageData.data[i]=0; 


    } 

    ctx2.putImageData(imageData,e.layerX,e.layerY); 
    } 

} 
    } 
    window.onload=makeit; 
    </script> 
    </body> 
    </html>

來源

2014-06-06 AL-zami

你的直覺是正確的 - 使用getImageData & putImageData是性能殺手。

可以使用合成「抹掉」頂部圖像和「兜底」底部圖像：

演示：http://jsfiddle.net/m1erickson/sHC6x/

enter image description here

如果設置了context.globalCompositeOperation =「目的地-out「，那麼任何新的圖紙將」刪除「任何現有的圖紙。這意味着您可以擦除頂部畫布以在底部畫布上顯示圖像。

此代碼（內部鼠標移動）將讓您使用鼠標的頂部畫布上的橡皮擦。

topContext.save(); 
topContext.globalCompositeOperation="destination-out"; 
topContext.beginPath(); 
topContext.moveTo(startX,startY); 
topContext.lineTo(mouseX,mouseY); 
topContext.stroke();

您可以設置像這樣的上下文筆劃設置來製作一個圓形的10px寬的橡皮擦。

topContext.lineWidth=10; 
topContext.lineCap = "round";

來源

2014-06-06 16:46:23 markE

thanks.i已經編輯我的post.actuallly在我的代碼10X10的矩形得到其不透明度change.i想改變每一個鼠標移動圓形截面的透明度event.can不能做到呢？ –

是的，有可能......看到我編輯的答案。 – markE

這真棒..感謝:)） –

通過鼠標移動事件

回答

相關問題