如何淡出画布中的项目

Question

我的页面中有一个全屏画布。此画布上还有一些潜水元素。画布中有一个圆形元素，随着光标在页面中的任何位置移动。但是，当光标到达画布上的div元素时，圆形将保留在画布上的最后位置，然后到达div。

DEMO：JSFIDDLE

当光标在div元素上方时，我可以淡出圆形，并在它返回画布时将其淡入吗？

还有其他影响而不是淡出？比如把它变小然后淡出......

以下是与圈子相关的一些代码：

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

好吧，你总是可以创建自己的淡入淡出函数，在mouseout（或mouseleave）事件中调用它。这是我为你快速建立的一个：

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);
    }
}

在此处查看此行动：http://jsfiddle.net/2p9dn8ed/42/

或在摘录中：

＆＃13;

＆＃13;

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;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;