如何淡出canvas中的项目

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

演示： 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://sofzh.miximages.com/javascript/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%; } 

  
TEXT