Я рисовал освещение с тенями при помощи рейкастинга, и обнаружил вот это:
Подскажите пожалуйста, что это и как от этого избавиться?
Код на html (не пинайте):
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
document.body.style.overflow = "hidden"
document.body.style.backgroundColor = "black"
ctx.globalAlpha = 0.5
ctx.fillStyle = "rgb(50, 50, 50)"
ctx.fillRect(0, 0, 1500, 1500)
blocksize = 50
gg = []
player_x = 450
player_y = -100
Block = function(x, y) {
this.x = x
this.y = y
}
Block.prototype.draw = function() {
ctx.fillStyle = "black"
ctx.globalAlpha = 1
ctx.fillRect(this.x, this.y, blocksize, blocksize)
};
blocks = [new Block(0, 0), new Block(50, 0), new Block(100, 0), new Block(0, 0), new Block(150, 0), new Block(200, 0), new Block(250, 0), new Block(300, 0), new Block(550, 0), new Block(550, 50), new Block(500, 0), new Block(500, 50), new Block(0, 500), new Block(50, 500),
new Block(100, 500),
new Block(150, 500),
new Block(200, 500),
new Block(250, 500),
new Block(300, 500),
new Block(350, 500),
new Block(400, 500),
new Block(450, 500),
new Block(500, 500),
new Block(550, 500),
new Block(350, 300),
new Block(400, 200)
]
window.onload = function(){
for (var i = blocks.length - 1; i >= 0; i--) {
blocks[i].draw()
}
}
var x, y = 0
function coll(arr, x1, y1) {
for (var i = arr.length - 1; i >= 0; i--) {
if (arr[i].x <= x1 && arr[i].x + blocksize >= x1 && arr[i].y <= y && arr[i].y + blocksize >= y) {
return true
}
}
return false
}
function newLight(xl, yl, color, startAlpha, deltaAlpha, angle, width) {
c = 0
i = 0
n = 0
g = false
while (c < width) {
i = 0
g = true
while (i < 1000) {
x = xl + i*Math.cos(c*0.002 + angle);
y = yl + i*Math.sin(c*0.002 + angle);
if (coll(blocks, x, y) == false) {
ctx.globalAlpha = startAlpha - i*deltaAlpha
ctx.fillStyle = color
ctx.fillRect(x, y, 1, 1)
} else {
break
}
i += 1
}
c += 1
}
}
newLight(player_x, player_y, "rgb(255, 255, 128)", 0.2, 0.00012, 1, 1024)
//newLight(player_x - 200, player_y + 200, "lime", 0.1, 0.00012, 1, 3142)
for (var i = blocks.length - 1; i >= 0; i--) {
blocks[i].draw()
}
</script>
</body>
P.S
Заметил что в firefox такого нет, в отличии от google chrome
