Javascript холст не будет рисовать из сценария - PullRequest
Новая
       44

Javascript холст не будет рисовать из сценария

0 голосов
/ 29 апреля 2020

Я сделал шестиугольник из шестиугольников на холсте, и он отлично работает, когда я изменяю его размер в скрипте и обновляю sh страницу. Конечно, для go необходимо изменить размер, поэтому я помещаю поле ввода числа, но когда я пытаюсь присвоить сценарию размер из html, происходит следующее:

enter image description here

Вот код: 

	function size()
	{
		return document.getElementById('myNumber').value;
	}
	
	function drawHex(ctx, x, y)
	{ 
		var side = 0;
		var size = 10;
		
		ctx.beginPath();
		ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));
		
		ctx.fillStyle = "#D1CBCA";
		ctx.strokeStyle = "#CCCCCC";
		ctx.lineWidth = 1;
		
		for (side; side < 7; side++)
		{
			ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
		}
		
		ctx.fill();
	}
	
	function drawSixHex(ctx, x, y)
	{
		drawHex(ctx, x, y);
		drawHex(ctx, x-16, y+10);
		drawHex(ctx, x-16, y-10);
		drawHex(ctx, x+16, y+10);
		drawHex(ctx, x+16, y-10);
		drawHex(ctx, x, y+2*10);
		drawHex(ctx, x, y-2*10);
	}
	
	function drawBoard(x, y, ctx, m)
	{
		ctx.clearRect(0,0,980,520);
		var oldX = x;
		var oldY = y;
			
		var diffX = 16;
		var diffY = 10;
		
		for (var i = 1; i<=(2*m+1); i++)
		{
			for (var j = 0; j<m+1; j++)
			{
				if(i%2!=0)
				{
					drawHex(ctx, oldX+i*diffX, oldY-diffY+2*j*diffY);
				}
				else
				{
					drawHex(ctx, oldX+i*diffX, oldY+2*j*diffY);
				}
			}	
		}
		
		for(var k = 1; k<m; k=k+2)
		{
		
			drawSixHex(ctx, oldX+(k+2)*diffX, oldY-k*diffY);
			drawSixHex(ctx, oldX+(k+2)*diffX, (oldY+2*m*diffY)+(k-2)*diffY);
			
			drawSixHex(ctx, oldX+(m-1)*diffX+(k+2)*diffX, oldY+(k-(m-1))*diffY);
			drawSixHex(ctx, oldX+(m-1)*diffX+(k+2)*diffX, (oldY+2*m*diffY)-(k-(m-3))*diffY);
		
		}
	
		for(var g = -2*m; g<2*m-2; g=g+2)
		{
			drawSixHex(ctx, oldX + (m+1)*diffX, oldY+(g)*diffY+(m+1)*diffY);
		}
		
	}
	
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext("2d");
	
	
	drawBoard(250, 250, ctx, size());
    <!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title>Canvas Hexagonal Map</title>
		</head>
		<body>
			<canvas id="canvas" width="980" height="520" ></canvas>
			<br>
			<br>
			
			
	
			<input type="number" id="myNumber" value="6" min="3" max="8">
			<button onclick="size()">Try it</button>
			
			<script src="script.js"></script>
			
			
		</body>
	</html>

Ответы [ 2 ]

2 голосов
/ 29 апреля 2020

Проблема в том, что dom уже рендерит и не «ре-рендерит» после обновления значения. Есть много способов реализовать решение. Здесь один подход. ПРИМЕЧАНИЕ : вам может потребоваться прокрутить вниз, чтобы ввести значение. Если вы найдете это полезным, пожалуйста, отметьте как ответ. Спасибо 

function resize()
{
    var SIZE = document.getElementById('myNumber').value;
    drawBoard(250, 250, ctx, SIZE);
    return 
}

function drawHex(ctx, x, y)
{ 
    var side = 0;
    var size = 10;

    ctx.beginPath();
    ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

    ctx.fillStyle = "#D1CBCA";
    ctx.strokeStyle = "#CCCCCC";
    ctx.lineWidth = 1;

    for (side; side < 7; side++)
    {
        ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
    }

    ctx.fill();
}

function drawSixHex(ctx, x, y)
{
    drawHex(ctx, x, y);
    drawHex(ctx, x-16, y+10);
    drawHex(ctx, x-16, y-10);
    drawHex(ctx, x+16, y+10);
    drawHex(ctx, x+16, y-10);
    drawHex(ctx, x, y+2*10);
    drawHex(ctx, x, y-2*10);
}

function drawBoard(x, y, ctx, m)
{
    ctx.clearRect(0,0,980,520);
    var oldX = x;
    var oldY = y;

    var diffX = 16;
    var diffY = 10;

    for (var i = 1; i<=(2*m+1); i++)
    {
        for (var j = 0; j<m+1; j++)
        {
            if(i%2!=0)
            {
                drawHex(ctx, oldX+i*diffX, oldY-diffY+2*j*diffY);
            }
            else
            {
                drawHex(ctx, oldX+i*diffX, oldY+2*j*diffY);
            }
        }   
    }

    for(var k = 1; k<m; k=k+2)
    {

        drawSixHex(ctx, oldX+(k+2)*diffX, oldY-k*diffY);
        drawSixHex(ctx, oldX+(k+2)*diffX, (oldY+2*m*diffY)+(k-2)*diffY);

        drawSixHex(ctx, oldX+(m-1)*diffX+(k+2)*diffX, oldY+(k-(m-1))*diffY);
        drawSixHex(ctx, oldX+(m-1)*diffX+(k+2)*diffX, (oldY+2*m*diffY)-(k-(m-3))*diffY);

    }

    for(var g = -2*m; g<2*m-2; g=g+2)
    {
        drawSixHex(ctx, oldX + (m+1)*diffX, oldY+(g)*diffY+(m+1)*diffY);
    }

}

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Canvas Hexagonal Map</title>
    </head>
    <body>
        <canvas id="canvas" width="980" height="520" ></canvas>
        <br>
        <br>



        <input type="number" id="myNumber" value="0" min="3" max="8">
        <button onclick="resize()">Try it</button>

        <script src="script.js"></script>


    </body>
</html>
1 голос
/ 29 апреля 2020

Вам необходимо преобразовать size() в число. Добавлено + перед размером (): 

function size()
	{
		return +(document.getElementById('myNumber').value);
	}
	
	function drawHex(ctx, x, y)
	{ 
		var side = 0;
		var size = 10;
		
		ctx.beginPath();
		ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));
		
		ctx.fillStyle = "#D1CBCA";
		ctx.strokeStyle = "#CCCCCC";
		ctx.lineWidth = 1;
		
		for (side; side < 7; side++)
		{
			ctx.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
		}
		
		ctx.fill();
	}
	
	function drawSixHex(ctx, x, y)
	{
		drawHex(ctx, x, y);
		drawHex(ctx, x-16, y+10);
		drawHex(ctx, x-16, y-10);
		drawHex(ctx, x+16, y+10);
		drawHex(ctx, x+16, y-10);
		drawHex(ctx, x, y+2*10);
		drawHex(ctx, x, y-2*10);
	}
	
	function drawBoard(x, y, ctx, m)
	{
		ctx.clearRect(0,0,980,520);
		var oldX = x;
		var oldY = y;
			
		var diffX = 16;
		var diffY = 10;
		
		for (var i = 1; i<=(2*m+1); i++)
		{
			for (var j = 0; j<m+1; j++)
			{
				if(i%2!=0)
				{
					drawHex(ctx, oldX+i*diffX, oldY-diffY+2*j*diffY);
				}
				else
				{
					drawHex(ctx, oldX+i*diffX, oldY+2*j*diffY);
				}
			}	
		}
		
		for(var k = 1; k<m; k=k+2)
		{
		
			drawSixHex(ctx, oldX+(k+2)*diffX, oldY-k*diffY);
			drawSixHex(ctx, oldX+(k+2)*diffX, (oldY+2*m*diffY)+(k-2)*diffY);
			
			drawSixHex(ctx, oldX+(m-1)*diffX+(k+2)*diffX, oldY+(k-(m-1))*diffY);
			drawSixHex(ctx, oldX+(m-1)*diffX+(k+2)*diffX, (oldY+2*m*diffY)-(k-(m-3))*diffY);
		
		}
	
		for(var g = -2*m; g<2*m-2; g=g+2)
		{
			drawSixHex(ctx, oldX + (m+1)*diffX, oldY+(g)*diffY+(m+1)*diffY);
		}
		
	}
	
	var canvas=document.getElementById("canvas");
	var ctx=canvas.getContext("2d");
	
	function draw(){
	  drawBoard(250, 250, ctx, +size());
  }
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<title>Canvas Hexagonal Map</title>
		</head>
		<body>
			<canvas id="canvas" width="980" height="520" ></canvas>
			<br>
			<br>
			
			
	
			<input type="number" id="myNumber" value="6" min="3" max="8">
			<button onclick="draw()">Try it</button>
			
			<script src="script.js"></script>
			
			
		</body>
	</html>

Обратите внимание, что это вроде работает, но работает забавно, потому что операторы сравнения выполняют неявное преобразование перед сравнением, поэтому вы получаете лексическое сравнение, где "15" <"125" возвращает false, но вы ожидаете, что 15 <125 вернет true. </p>

...