discover hidden image by changing cover image opacity on mousemove event
Question
i wrote some simple code to change opacity of cover image to reveal a hidden image under it.there are two canvas one on top of the other.both are 500x500.both the canvas has an image.Here i made to change the opacity of the cover image on mouse move event so that the hidden image could be visible.i used e.layerX/Y to get the coordinates.i can manage one pixel by one pixel opacity manipulation using which is not user friendly
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);
}
}
i want it to make opacity change for a certain circular section on every mousemove.how can i do that?
FULL CODE:
<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 answers
solution1
1 ACCPTED 2014-06-06 16:46:23
Your intuition is correct--using getImageData & putImageData is a performance killer.
You can use compositing to "erase" a top image and "reveal" a bottom image:
A Demo: http://jsfiddle.net/m1erickson/sHC6x/
If you set the context.globalCompositeOperation="destination-out", then any new drawings will "erase" any existing drawings. This means you can erase the top canvas to reveal the image on the bottom canvas.
This code (inside mousemove) will let you use the mouse as an eraser on the top canvas.
topContext.save();
topContext.globalCompositeOperation="destination-out";
topContext.beginPath();
topContext.moveTo(startX,startY);
topContext.lineTo(mouseX,mouseY);
topContext.stroke();
You can set the context stroke settings like this to make a circular the eraser that is 10px wide.
topContext.lineWidth=10;
topContext.lineCap = "round";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.