Draw an image on top of another image with an animated element
Question
Initially what I am trying to do is place a blurry image on top of the same image that is clear. Then having another element(div box) that animates across the blurry image showing the clear image. Thus giving the effect like it is a pair of glasses.. Now I KNOW this can be achieved through html5 canvas, however I am not very knowledgable with this api and how to achieve it. There are two things that I am struggling with doing.
The first thing would be to change out the grey fillColor that gets erased so you can see the image behind it, with the blurry image. Now I have attempted to perform the drawImage() function. But cannot seem to get it to work with the current code that I have. Any suggestions or examples would be greatly appreciated.
The second thing would be to have the animating div do the 'erasing' instead of the user performing a mouse down functionality.
Third and last thing (more worried about just getting the first two figured out), would be for the image to go back to the reblur image after the div has moved.
I am open to ideas of better approaches as well. I greatly appreciate any time spent assisting myself.
animateLense(); function animateLense() { $("#lense").animate({ left: 200, top: 150 }, 2000 ); } (function() { // Creates a new canvas element and appends it as a child // to the parent element, and returns the reference to // the newly created canvas element function createCanvas(parent, width, height) { var canvas = {}; canvas.node = document.createElement('canvas'); canvas.context = canvas.node.getContext('2d'); canvas.node.width = width || 100; canvas.node.height = height || 100; parent.appendChild(canvas.node); return canvas; } function init(container, width, height, fillColor) { var canvas = createCanvas(container, width, height); var ctx = canvas.context; // define a custom fillCircle method ctx.fillCircle = function(x, y, radius, fillColor) { this.fillStyle = fillColor; this.beginPath(); this.moveTo(x, y); this.arc(x, y, radius, 0, Math.PI * 2, false); this.fill(); }; ctx.clearTo = function(fillColor) { ctx.fillStyle = fillColor; ctx.fillRect(0, 0, width, height); }; ctx.clearTo(fillColor || "#ddd"); // bind mouse events canvas.node.onmousemove = function(e) { if (!canvas.isDrawing) { return; } var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var radius = 10; // or whatever var fillColor = '#ff0000'; ctx.globalCompositeOperation = 'destination-out'; ctx.fillCircle(x, y, radius, fillColor); }; canvas.node.onmousedown = function(e) { canvas.isDrawing = true; }; canvas.node.onmouseup = function(e) { canvas.isDrawing = false; }; // bind mouse end } var container = document.getElementById('canvas'); init(container, 300, 250, '#ddd'); })();
.canvas { position: absolute; width: 300px; height: 250px; left: 0px; top: 0px; background: url("http://www.atlantisbahamas.com/media/Things%20To%20Do/Water%20Park/Beaches/Gallery/waterpark_covebeach.jpg"); background-size: 300px, 250px } .lense { position: absolute; height: 50px; width: 50px; border: 2px black solid; top: 0; left: 0; }
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div class="canvas" id="canvas"> <div class="lense" id="lense"></div> </div> </body> </html>
1 answers
solution1
0 2017-01-25 23:07:07
Just draw two images in the same location.
Draw the second one on top of the first one with:
ctx.globalAlpha = 0.5; // Set to animated value
Animate globalAlpha.
Note: You don't draw images inside <canvas> using HTML elements. You have to load them up via JavaScript and use the drawImage method.
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.