我正在开发一款 2D 平台游戏。star背景中有物体,这些星星四处移动。我想在它们之间划清界限,而且我不费吹灰之力就做到了。我现在要做的是为alpha正在绘制的线条添加一个值(透明度)。我试图写一个方程,其中 alpha 值与两个物体之间的距离值成反比,但没有成功。我如何数学表达以下规则?距离越大,alpha 值越小例如,如果距离是400那么透明度值应该是0(java.awt.Color 使用 0 作为 100% 透明度和 255 作为不透明度)这是我试图实现的一个例子:var canvas = document.getElementById("canvas"), ctx = canvas.getContext('2d');canvas.width = window.innerWidth;canvas.height = window.innerHeight;var stars = [], // Array that contains the stars FPS = 60, // Frames per second x = 40, // Number of stars mouse = { x: 0, y: 0 }; // mouse location// Push stars to the arrayfor (var i = 0; i < x; i++) { stars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, radius: Math.random() * 1 + 1, vx: Math.floor(Math.random() * 50) - 25, vy: Math.floor(Math.random() * 50) - 25 });}// Draw the scenefunction draw() { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.globalCompositeOperation = "lighter"; for (var i = 0, x = stars.length; i < x; i++) { var s = stars[i]; ctx.fillStyle = "#fff"; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = 'black'; ctx.stroke(); } ctx.beginPath(); for (var i = 0, x = stars.length; i < x; i++) { var starI = stars[i]; ctx.moveTo(starI.x,starI.y); if(distance(mouse, starI) < 150) ctx.lineTo(mouse.x, mouse.y); for (var j = 0, x = stars.length; j < x; j++) { var starII = stars[j]; if(distance(starI, starII) < 150) { //ctx.globalAlpha = (1 / 150 * distance(starI, starII).toFixed(1)); ctx.lineTo(starII.x,starII.y); } } } ctx.lineWidth = 0.05; ctx.strokeStyle = 'white'; ctx.stroke();}function distance( point1, point2 ){ var xs = 0; var ys = 0; xs = point2.x - point1.x; xs = xs * xs; ys = point2.y - point1.y; ys = ys * ys; return Math.sqrt( xs + ys );}
1 回答
慕工程0101907
TA贡献1887条经验 获得超5个赞
你应该使用:
((MAX_DISTANCE - distance) / MAX_DISTANCE) * 255
说明:(MAX_DISTANCE - distance)
可以确保较大的距离,更小的结果。
然后,MAX_DISTANCE
乘以 255,将其从 0-MAX_DISTANCE 缩放到 0-255。
添加回答
举报
0/150
提交
取消