Сообщение от рони
|
Arhitector,
мысли вслух ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<canvas id="canvas" width="600" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
var img = new Image;
img.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
img.onload = function() {
draw(this);
};
function draw(img) {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 600, 400);
function move(event) {
ctx.drawImage(img, 0, 0, 600, 400);
var x = event.layerX;
var y = event.layerY;
var grd = ctx.createRadialGradient(x, y, 5, x, y, 100);
grd.addColorStop(0, "transparent");
grd.addColorStop(1, "black");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 600, 400);
}
canvas.addEventListener("mousemove", move);
};
</script>
</body>
</html>
|
Вот это действительно очень круто, спасибо. Сколько не гуглил но на
createRadialGradient ни разу так и не наткнулся.
Тут возникает немного другая проблема, когда вешаю данный код на функцию
при наведением мыши которая запускается при попадании курсора на холст, всё работает замечательно.
А вот когда пытаюсь привязать данное действие к координатам персонажа в функции
которая запускается сразу и начинает зацикленно отрисовывать мою карту, вот тут сразу же игру ломает вот такая ошибка
Uncaught TypeError: Failed to execute 'createRadialGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite.
at Object.drawMapBackground (draw.js:212)
at render (game.js:178)
at Image.water_bg.onload (game.js:211)
function render () {
// отрисовка ландшафта, объектов персонажа и тд тд тд
draw.drawMapBackground(); // <<<<----- сюда
requestAnimationFrame(render); // зацикливание отрисовки
}
var draw = {
// код код код
//
drawMapBackground: function () {
var real_pos = character.getRealCoordinates();
var grd = ctx.createRadialGradient(real_pos.x, real_pos.y, 10, real_pos.x, real_pos.y, r);
grd.addColorStop(0, "transparent");
grd.addColorStop(1, "rgba(0,0,0,0.85)");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, example.width, example.height);
}
}
С чем это может быть связано? Сам я что то не смог разобраться, гугловский перевод аля
"
Предоставляемое двойное значение не ограничено" как то совсем не помог увы
