通过在mousemove事件上更改封面图像不透明度来发现隐藏的图像

时间:2014-06-06 15:16:43

标签: javascript canvas

我写了一些简单的代码来改变封面图像的不透明度,以显示它下面的隐藏图像。另外两个画布一个。两个都是500x500。画布上有一个图像。这是我改变了鼠标移动事件中封面图像的不透明度,以便隐藏图像可见。我使用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);
   }

}

我想让它为每个mousemove上的某个圆形部分进行不透明度更改。我可以这样做吗?

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>

1 个答案:

答案 0 :(得分:1)

你的直觉是正确的 - 使用getImageData&amp; putImageData是一个性能杀手。

您可以使用合成来“擦除”顶部图像并“显示”底部图像:

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

enter image description here

如果设置context.globalCompositeOperation =“destination-out”,则任何新图形都将“擦除”任何现有图形。这意味着您可以擦除顶部画布以在底部画布上显示图像。

此代码(在mousemove内部)将允许您将鼠标用作顶部画布上的橡皮擦。

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";