如何淡出画布中的项目

Question

I have a full screen canvas in my page. There are also some dive elements over this canvas. there is an circle element in the canvas that moves with the cursor everywhere in the page. However when the cursor arrives to the div element over the canvas, the circle shape stays in the last place it was on the canvas before arriving to the div.

DEMO: JSFIDDLE

Is ther any way that I can fade-out the circle shape when the cursor is over the div element and fade it in when it backs to the canvas?

Also is there any other effect rather than fading out? like making it small and then fade-out...

Here is the bit of code related to the circle:

function writeMessage(canvas, message, x, y) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
    context.fillStyle = pattern;
    context.fill();    

    context.fillStyle = 'black';
    context.beginPath();
    context.arc(x, y, 60, 0, 2 * Math.PI);

}

Answer 1

Well, you can always create your own fade function that gets called on mouseout (or mouseleave ) event. Here's one I quickly built for you:

function fadeOut(canvas, message, x, y, amount) {    
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);

    var pattern = context.createPattern(imageResized, 'no-repeat');
    context.fillStyle = pattern;
    context.fill();    

    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    context.beginPath();
    context.arc(x, y, amount, 0, 2 * Math.PI);
    if (amount > 0) {
        setTimeout(function(){
            fadeOut(canvas, message, x, y, --amount);
        }, 2);
    }
    else {
        context.clearRect(0, 0, canvas.width, canvas.height);
    }
}

See it in action here: http://jsfiddle.net/2p9dn8ed/42/

Or in the snippet:

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var x = 0; var y = 0; var width = window.innerWidth; var height = window.innerHeight; var imageObj = new Image(); console.log(window.innerWidth + "----" + window.innerHeight); //Create another canvas to darw a resized image to. var imageResized = document.createElement('canvas'); imageResized.width = width; imageResized.height = height; //Wait for the original image to low to draw the resize. imageObj.onload = function() { //Find hoe mauch to scale the image up to cover. var scaleX = width / imageObj.width; var scaleY = height / imageObj.height; var scaleMax = Math.max(scaleX, scaleY); var ctx = imageResized.getContext('2d'); ctx.scale(scaleMax, scaleMax); ctx.drawImage(imageObj, 0, 0); }; imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; function writeMessage(canvas, message, x, y) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj. context.fillStyle = pattern; context.fill(); context.font = '28pt Calibri'; context.fillStyle = 'black'; //context.fillText(message, x, y); context.beginPath(); context.arc(x, y, 60, 0, 2 * Math.PI); //context.stroke(); // } function fadeOut(canvas, message, x, y, amount) { var context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj. context.fillStyle = pattern; context.fill(); context.font = '28pt Calibri'; context.fillStyle = 'black'; //context.fillText(message, x, y); context.beginPath(); context.arc(x, y, amount, 0, 2 * Math.PI); //context.stroke(); // if (amount > 0) { setTimeout(function(){ fadeOut(canvas, message, x, y, --amount); }, 2); } else { context.clearRect(0, 0, canvas.width, canvas.height); } } function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: evt.clientX - rect.left, y: evt.clientY - rect.top }; } canvas.addEventListener('mousemove', function (evt) { var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; writeMessage(canvas, message, mousePos.x, mousePos.y); }, false); canvas.addEventListener('mouseout', function(evt){ var mousePos = getMousePos(canvas, evt); var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y; console.log(1); fadeOut(canvas, message, mousePos.x, mousePos.y, 60); }); // Get the canvas element form the page var canvas = document.getElementById("myCanvas"); /* Rresize the canvas to occupy the full page, by getting the widow width and height and setting it to canvas*/ canvas.width = window.innerWidth; canvas.height = window.innerHeight; 

 anvas, img { display:block; margin:1em auto; border:1px solid black; } canvas { background:url('../img/spiral_galaxy-1920x1080.jpg'); background-size: cover; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index:-1; } div{ width:200px; height:200px; background:rgba(0,0,0,0.5); position: fixed; top: 20%; left: 20%; } 

 <canvas id="myCanvas" width="578" height="400"></canvas> <div><h1>TEXT</h1></div>