如何淡出画布中的项目 [英] How to fade out an item in canvas

问题描述

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

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.

演示: JSFIDDLE

有什么办法可以使光标在div元素上方时淡出圆形形状，并在它返回画布时淡入圆形吗?

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

}

推荐答案

好吧，您始终可以创建自己的淡入淡出函数，该函数在mouseout(或mouseleave)事件上被调用.这是我为您快速构建的:

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

在此处查看其运行情况: http://jsfiddle.net/2p9dn8ed/42/

See it in action here: 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>

这篇关于如何淡出画布中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！