如何淡出 canvas 中的项目

Question

我的页面有一个全屏 canvas。在这个 canvas 上还有一些 dive 元素。 canvas 中有一个圆形元素，它随光标在页面各处移动。但是，当光标到达 canvas 上的 div 元素时，圆形停留在到达 div 之前在 canvas 上的最后一个位置。

演示：JSFIDDLE

有什么方法可以让我在光标位于 div 元素上方时淡出圆形，并在它返回 canvas 时淡入？

除了淡出还有什么别的效果吗？比如把它变小然后淡出...

这是与圆相关的代码：

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/

或在代码段中：

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>

如何淡出 canvas 中的项目

How to fade out an item in canvas

javascript

jquery

css

canvas

fadeout