javascript - 如何使用 PHP 和 HTML 绘制这种类型的 "binary matrix"图形(我不知道它是否有名称)

Question

我正在尝试绘制这种类型的“二进制矩阵”图形:

忽略样本图像中的两种颜色；我想将一个点涂成蓝色(比如说“完整”值)，或者将其保留为未着色/灰色(表示“不完整”值)，作为跟踪特定数量的点/天的每日任务完成情况的方法。这些点代表任务完成或未完成的一天。显示每天的全部点数可以了解随着时间的推移完成的百分比。

我想使用 HTML/Javascript 和 PHP + MySQL 的组合。但对我来说最困难的部分是找出一个好的算法来渲染这种可视化。感谢您的帮助。

Answer 1

只需将每个点视为一个像素即可。另外，假设图像已逆时针旋转 90°。然后，您只需绘制一个占用较少分配给它的空间的正方形 - 这样，您就可以得到分隔线。

这是一个可以快速玩的东西。 一些注意事项:

• 0) 我刚刚将您的图像尺寸减半
• 1)任意选择4个像素和5个像素
• 2)我没有费心去设置点的颜色 - 你可以 轻松做到这一点。
• 3)我只是将绘图区域视为正常的上下 位图，而您的图像似乎显示所有 Y 值都会 在需要下一个 X 值之前使用。 (这就像逆时针 90° 轮换)。
• 4)我用 X 和 Y 来寻址像素 - 也许你会 更有兴趣用一个号码来解决这些问题吗？如果是这样，你 可以轻松编写一个函数，将两个坐标映射到一个坐标 number - 像素索引，如果您愿意的话。

即，如果图像为 100 x 100，则有 10,000 个像素。您可以通过指定 0 - 9,999 之间的数字来解决它们 例如

function 10k_to_100x100(index)
{
   var x = index % 100;
   var y = (index / 100).toFixed(0);
   plotPixelDot(x, y);
}

X 只是除以宽度时的余数 Y 是除以宽度时的整数答案

以下是您可以在页面上尝试的代码片段:

function byId(id){return document.getElementById(id);}
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
	var x, y;
	
	for (y=0; y<20; y++)
	{
		for (x=0; x<100; x++)
		{
			drawDot(x, y, 'output');
		}
	}
}

function drawDot(xPos, yPos, canvasId)
{
	var actualX=xPos*5, actualY=yPos*5;
	var ctx = byId(canvasId).getContext('2d');
	ctx.fillRect(actualX, actualY, 4, 4);
}

<canvas width=558 height=122 id='output'></canvas>