Добрый день, может ли кто то подсказать как такое как на картинке можно нарисовать в canvas-е. План здания я нарисовал, теперь нужно сделать концентрические круги, что приставляют мощность сигнала, и там где стена, сигнал ухудшается сильнее и соответственно меняется цвет
Есть точка от которой расходятся концентрические круги, возле точки сигнал 100% и постипенно он падает до 0, пускай каждый круг шириной 2px равен 1% сигнала. Стена глушит приблизитльно на 40%. Все ето нада визуализировать приблизительно так:
Здесь я нарисовал план помещения и будущую точку доступа
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext('2d');
//------------------------------------- определяем координаты курсора, //для передвижения нашей точки доступа
var canvasPos = getPosition(canvas);
var mouseX = 100;
var mouseY = 100;
function getPosition(el) {
var xPosition = 0;
var yPosition = 0;
while (el) {
xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
el = el.offsetParent;
}
return {
x: xPosition,
y: yPosition
};
}
function setMousePosition(e) {
mouseX = e.clientX - canvasPos.x;
mouseY = e.clientY - canvasPos.y;
}
canvas.onmousedown = function move() {
canvas.addEventListener("mousemove", setMousePosition, false);
};
canvas.onmouseup = function() {
canvas.removeEventListener("mousemove", setMousePosition, false);
};
//-------------------------------------- создаю функцию для рисованния //плана помещения
var img = new Image();
var imageData;
img.src = "https://s31.postimg.cc/w37y6uza3/plan1.png";
function imageOnLoad() {
context.drawImage(img, 0, 0);
//console.log(context.getImageData(0,0, img.width, img.height));
}
//-------------------------------------
function update() { // рисую план, и точку доступа
var circleRadius = 10;
context.clearRect(0, 0, canvas.width, canvas.height);
imageOnLoad();
context.beginPath();
context.arc(mouseX, mouseY, circleRadius, 0, 2 * Math.PI, true);
context.fillStyle = 'red';
context.fill();
context.closePath();
requestAnimationFrame(update);
}
update();
var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext('2d');
var canvasPos = getPosition(canvas);
var mouseX = 100;
var mouseY = 100;
//-------------------------------- определяем координаты курсора, для передвижения
function getPosition(el) {
var xPosition = 0;
var yPosition = 0;
while (el) {
xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
el = el.offsetParent;
}
return {
x: xPosition,
y: yPosition
};
}
function setMousePosition(e) {
mouseX = e.clientX - canvasPos.x;
mouseY = e.clientY - canvasPos.y;
}
canvas.onmousedown = function move () {
canvas.addEventListener("mousemove", setMousePosition, false);
};
canvas.onmouseup = function () {
canvas.removeEventListener("mousemove", setMousePosition, false);
};
//-----------------------------------
let colorObj = { //создаю объект с цветами
100: [255, 51, 53, 255],
90: [255, 51, 52, 255],
80: [255, 51, 51, 255],
70: [255, 255, 53, 255],
60: [255, 255, 52, 255],
50: [255, 255, 51, 255],
40: [113, 255, 53, 255],
30: [113, 255, 52, 255],
20: [113, 255, 51, 255],
10: [51, 150, 255, 255],
0: [51, 255, 243, 255]
};
function update() {
context.clearRect(0, 0, canvas.width, canvas.height);
//----------------------- рисую линию-стену
context.beginPath();
context.lineWidth = 2;
context.moveTo(300 ,100);
context.lineTo(300 ,300);
context.stroke();
//-----------------------
//------------------------ рисую набор разноцветных квадратов
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[100][0] + ',' + colorObj[100][1] + ',' + colorObj[100][2] + ',' + colorObj[100][3] + ')';
context.fillRect(mouseX,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[90][0] + ',' + colorObj[90][1] + ',' + colorObj[90][2] + ',' + colorObj[90][3] + ')';
context.fillRect(mouseX + 10 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[80][0] + ',' + colorObj[80][1] + ',' + colorObj[80][2] + ',' + colorObj[80][3] + ')';
context.fillRect(mouseX + 20 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[70][0] + ',' + colorObj[70][1] + ',' + colorObj[70][2] + ',' + colorObj[70][3] + ')';
context.fillRect(mouseX + 30 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[60][0] + ',' + colorObj[60][1] + ',' + colorObj[60][2] + ',' + colorObj[60][3] + ')';
context.fillRect(mouseX + 40 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[50][0] + ',' + colorObj[50][1] + ',' + colorObj[50][2] + ',' + colorObj[50][3] + ')';
context.fillRect(mouseX + 50 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[40][0] + ',' + colorObj[40][1] + ',' + colorObj[40][2] + ',' + colorObj[40][3] + ')';
context.fillRect(mouseX + 60 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[30][0] + ',' + colorObj[30][1] + ',' + colorObj[30][2] + ',' + colorObj[30][3] + ')';
context.fillRect(mouseX + 70 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[20][0] + ',' + colorObj[20][1] + ',' + colorObj[20][2] + ',' + colorObj[20][3] + ')';
context.fillRect(mouseX + 80 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[10][0] + ',' + colorObj[10][1] + ',' + colorObj[10][2] + ',' + colorObj[10][3] + ')';
context.fillRect(mouseX + 90 ,mouseY,10,10);
context.closePath();
context.beginPath();
context.fillStyle = 'rgb(' + colorObj[0][0] + ',' + colorObj[0][1] + ',' + colorObj[0][2] + ',' + colorObj[0][3] + ')';
context.fillRect(mouseX + 100 ,mouseY,10,10);
context.closePath();
// ----------------------------------------------------------------------
var imgData = context.getImageData(300,100,2,200);// узаню цвета пикселей в данной области
for (let i=0;i<imgData.data.length;i+=4)
{// проверяю, если цвет в етой области поменялся, меняю его на другой
if(imgData.data[i] === 51 && imgData.data[i+1] === 255 && imgData.data[i+2] === 243 && imgData.data[i+3] === 255 ){
colorObj[0] = [255, 255, 255, 0];
} else if (imgData.data[i] === 51 && imgData.data[i+1] === 150 && imgData.data[i+2] === 255 && imgData.data[i+3] === 255){
colorObj[10] = [255, 255, 255, 0];
} else if (imgData.data[i] === 113 && imgData.data[i+1] === 255 && imgData.data[i+2] === 51 && imgData.data[i+3] === 255){
colorObj[20] = [255, 255, 255, 0];
} else if (imgData.data[i] === 113 && imgData.data[i+1] === 255 && imgData.data[i+2] === 52 && imgData.data[i+3] === 255){
colorObj[30] = [51, 255, 243, 255];
} else if (imgData.data[i] === 113 && imgData.data[i+1] === 255 && imgData.data[i+2] === 53 && imgData.data[i+3] === 255){
colorObj[40] = [51, 150, 255, 255];
} else if (imgData.data[i] === 255 && imgData.data[i+1] === 255 && imgData.data[i+2] === 51 && imgData.data[i+3] === 255){
colorObj[50] = [113, 255, 51, 255];
} else if (imgData.data[i] === 255 && imgData.data[i+1] === 255 && imgData.data[i+2] === 52 && imgData.data[i+3] === 255){
colorObj[60] = [113, 255, 52, 255];
} else if (imgData.data[i] === 255 && imgData.data[i+1] === 255 && imgData.data[i+2] === 53 && imgData.data[i+3] === 255){
colorObj[70] = [113, 255, 53, 255];
} else if (imgData.data[i] === 255 && imgData.data[i+1] === 51 && imgData.data[i+2] === 51 && imgData.data[i+3] === 255){
colorObj[80] = [255, 255, 51, 255];
} else if (imgData.data[i] === 255 && imgData.data[i+1] === 51 && imgData.data[i+2] === 52 && imgData.data[i+3] === 255){
colorObj[90] = [255, 255, 52, 255];
} else if (imgData.data[i] === 255 && imgData.data[i+1] === 51 && imgData.data[i+2] === 53 && imgData.data[i+3] === 255){
colorObj[100] = [255, 255, 53, 255];
}
}
requestAnimationFrame(update);
}
update();
Сначала думал разделить все круги на четыре сектора и по-пиксельно рисовать каждый используя формулы для полярной системы координат, но так не точно по пикселях рисует, и сильно систему нагружает.
var circleRadius = 10;
var r = circleRadius+1;
var R = circleRadius + 100;
while (r < R){
var Fi = Math.PI/180;
while (Fi <= (Math.PI/2)){
context.beginPath();
var x = mouseX;
var y = mouseY;
var startAngle = 0;
var endAngle = Fi;
context.arc(x, y, r, startAngle, endAngle, false);
var xPolarn = r*Math.cos(Fi);
var YPolarn = r*Math.sin(Fi);
var xDecart = mouseX + xPolarn ;
var yDecart = mouseY + YPolarn ;
context.strokeStyle = 'white';
context.stroke();
context.closePath();
context.beginPath();
context.fillStyle = 'black';
context.rect(xDecart, yDecart, 1, 1);
context.fill();
Fi += Math.PI/180; //+1 deg
if(Fi < 1) {
//Fi = 1;
}
}
r += 1;
}