如何使用PHP和HTML

Question

我試圖繪製這種類型的「二元矩陣」繪製這種類型的「二元矩陣」圖形（老實說，我不知道，如果它有一個名字）圖形：

忽略樣本圖像中的兩種顏色;我想要爲點「藍色」填充顏色，比方說「完整」值，或者將顏色填充爲「不完整」值或使灰色填充爲「不完整」值，作爲跟蹤每日任務完成度的方式。點代表任務完成或未完成的日子。顯示完整的點數/天數可以讓您瞭解完成時間的百分比。我想使用HTML/Javascript和PHP + MySQL的組合。但對我來說最困難的部分是找出一個好的算法來呈現這個可視化。謝謝你的幫助。

Answer 1

只要對待每個點就像是一個像素。另外，假設圖像已被逆時針旋轉90°。然後，您只需繪製一個佔用的空間較少的正方形 - 這樣，您就可以得到分隔線。

這裏有一個快速的東西可以玩。 一些注意：

• 0）我剛減半圖像尺寸
• 1）4個像素和第5個像素被任意選擇
• 2）沒有設置點的顏色打擾 - 你可以輕鬆地做到這一點， 。
• 3）我只是簡單地將繪圖區域當作普通的頂部 位圖來處理，而您的圖像似乎表明在需要下一個X值之前將使用所有的Y值 。 （這就像90°CCW 旋轉）。
• 4）我用X和Y處理像素 - 也許你會更喜歡用單個數字來解決它們？如果是這樣，你可以很容易地寫一個函數，將兩個座標圖映射到一個單一的 數字 - 像素索引，如果你喜歡。

即，如果圖像是100 x 100，則有10,000個像素。您可以通過從0指定數量的解決這些問題 - 9999 如

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

X簡直其餘由寬度

這裏將當由寬度 Ÿ分割時的整數答案的一個片段你可以試試這裏的網頁上：

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

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

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

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