如何淡出畫布中的項目

Question

我的頁面上有一個全屏畫布。 此畫布上還有一些潛水元素。 畫布中有一個圓形元素，可隨光標在頁面中的任何位置移動。 但是，當光標到達畫布上的div元素時，圓形將停留在到達div之前在畫布上的最后位置。

演示： 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/

或在摘要中：

 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>