Javascript画布不会从脚本中绘制

【问题标题】：Javascript canvas won't draw from scriptJavascript画布不会从脚本中绘制
【发布时间】：2020-08-13 23:41:28
【问题描述】：

我在画布上用六边形制作了一个六边形，当我在脚本中更改它的大小并刷新页面时，它可以完美运行。当然它需要随时更改大小，所以我输入了一个数字字段，但是当我尝试将 html 的大小提供给脚本时，接下来会发生：

代码如下：

	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>

【问题讨论】：

  • 你只是通过 size 函数返回大小。而不是你应该用那个大小重新绘制画布。

标签： javascript html canvas parameter-passing


【解决方案1】：

您需要将size() 转换为数字。在 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"

【讨论】：

    【解决方案2】：

    问题是 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>

    【讨论】：

    • 它仍然产生同样的问题。六边形无缘无故地开始增长。问题可能是我给 drawBoard() 绘制整个十六进制的参数的方式。
    • 如果你不希望它以默认值呈现，则默认值为 6，请将其更改为 0
    • 我认为他的意思是绘图与他的预期输出不符。他在 OP 中谈到了“六边形中的六边形”。他的六边形布局有问题。
    猜你喜欢
    • 2017-01-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-02-15
    • 1970-01-01
    • 1970-01-01
    • 2011-10-28
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode