Skip to content

Instantly share code, notes, and snippets.

@picasso250

picasso250/grid.html

Last active December 28, 2017 06:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save picasso250/62496f08a22a72d4b2dfa0ef61cc1e6f to your computer and use it in GitHub Desktop.
Save picasso250/62496f08a22a72d4b2dfa0ef61cc1e6f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
grid.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="220" height="220"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var RED = '#ff6f6f';
var WHITE = 'white';
var block_size = 30;
var block_num = 6;
ctx.strokeStyle='#555555';
ctx.lineWidth = 1;
ctx.translate(20,20);
ctx.fillStyle = '#eeeeee';
ctx.fillRect(0,0,block_num*block_size,block_num*block_size);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,block_num*block_size);
ctx.moveTo(0,0);
ctx.lineTo(block_num*block_size,0);
ctx.stroke();
for (var i = 0; i < block_num; i++) {
for (var j = 0; j < block_num; j++) {
ctx.beginPath();
ctx.moveTo((i+1)*block_size,(j+1)*block_size);
ctx.lineTo(i*block_size,(j+1)*block_size);
ctx.moveTo((i+1)*block_size,(j+1)*block_size);
ctx.lineTo((i+1)*block_size,j*block_size);
ctx.stroke();
// ctx.strokeRect(i*block_size, j*block_size, block_size, block_size);
}
}
var thinBackColor = '#f9de7f64';
// backG(2,2,thinBackColor);
// backG(1,2,thinBackColor);
// backG(2,1,thinBackColor);
// backG(3,3,thinBackColor);
// backG(3,4,thinBackColor);
// backG(4,3,thinBackColor);
// backG(2,3,thinBackColor);
// backG(2,4,thinBackColor);
// backG(1,3,thinBackColor);
// backG(3,2,thinBackColor);
// backG(4,2,thinBackColor);
// backG(3,1,thinBackColor);
//
// backG(1,1,thinBackColor);
// backG(0,1,thinBackColor);
// backG(0,2,thinBackColor);
// backG(0,3,thinBackColor);
//
// backG(3,5,thinBackColor);
// backG(2,5,thinBackColor);
// backG(1,5,thinBackColor);
// backG(1,4,thinBackColor);
// backG(0,4,thinBackColor);
// backG(0,5,thinBackColor);
// fore
drawCircle(WHITE, 1,1, 'A');
drawCircle(WHITE, 2,1, 'B');
drawCircle(WHITE, 3,1, 'C');
drawCircle(RED, 2,2, 'D');
drawCircle(RED, 3,2, 'E');
drawCircle(RED, 2,3, 'F');
drawCircle(RED, 3,3, 'G');
drawCircle(WHITE, 0,4, 'H');
// first two white
ctx.strokeStyle = '#e43364';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(1*block_size,3*block_size);
ctx.lineTo(5*block_size,3*block_size);
ctx.moveTo(3*block_size,1*block_size);
ctx.lineTo(3*block_size,5*block_size);
// third white
ctx.moveTo(3*block_size,5*block_size);
ctx.lineTo(2*block_size,5*block_size);
ctx.lineTo(2*block_size,4*block_size);
ctx.moveTo(2*block_size,4*block_size);
ctx.lineTo(0*block_size,4*block_size);
ctx.lineTo(0*block_size,1*block_size);
ctx.moveTo(2*block_size,1*block_size);
ctx.lineTo(2*block_size,2*block_size);
ctx.lineTo(1*block_size,2*block_size);
ctx.lineTo(1*block_size,3*block_size);
// fifth
ctx.moveTo(5*block_size,3*block_size);
ctx.lineTo(5*block_size,4*block_size);
ctx.lineTo(4*block_size,4*block_size);
ctx.lineTo(4*block_size,6*block_size);
ctx.lineTo(0*block_size,6*block_size);
ctx.lineTo(0*block_size,4*block_size);
// all
ctx.moveTo(0*block_size,1*block_size);
ctx.lineTo(0*block_size,0*block_size);
ctx.lineTo(2*block_size,0*block_size);
ctx.lineTo(2*block_size,1*block_size);
ctx.moveTo(2*block_size,0*block_size);
ctx.lineTo(6*block_size,0*block_size);
ctx.lineTo(6*block_size,2*block_size);
ctx.lineTo(4*block_size,2*block_size);
ctx.lineTo(4*block_size,1*block_size);
ctx.lineTo(3*block_size,1*block_size);
ctx.moveTo(6*block_size,2*block_size);
ctx.lineTo(6*block_size,6*block_size);
ctx.lineTo(4*block_size,6*block_size);
ctx.stroke();
// uncertain
var uncertainBorderStyle = '#f7b775';
ctx.strokeStyle = uncertainBorderStyle;
ctx.lineWidth = 2;
ctx.beginPath();
// ctx.moveTo(2*block_size,1*block_size);
// ctx.lineTo(4*block_size,1*block_size);
// ctx.lineTo(4*block_size,2*block_size);
// ctx.lineTo(5*block_size,2*block_size);
// ctx.lineTo(5*block_size,3*block_size);
// ctx.lineTo(4*block_size,4*block_size);
// ctx.lineTo(4*block_size,5*block_size);
// ctx.lineTo(3*block_size,5*block_size);
// ctx.lineTo(2*block_size,4*block_size);
// ctx.lineTo(1*block_size,4*block_size);
// ctx.lineTo(1*block_size,2*block_size);
// ctx.lineTo(2*block_size,2*block_size);
// ctx.lineTo(2*block_size,1*block_size);
// ctx.moveTo(1*block_size,6*block_size);
// ctx.lineTo(1*block_size,4*block_size);
ctx.stroke();
ctx.strokeStyle = uncertainBorderStyle;
ctx.beginPath();
// ctx.moveTo(0*block_size,1*block_size);
// ctx.lineTo(2*block_size,1*block_size);
ctx.stroke();
function drawCircle(color, i, j, label) {
var radius = block_size * 0.35;
var cx = i*block_size+block_size/2;
var cy = j*block_size+block_size/2;
ctx.fillStyle=color;
ctx.strokeStyle='black';
ctx.beginPath();
ctx.arc(cx,cy,radius,0,2*Math.PI);
ctx.fill();
ctx.stroke();
var fontSize = parseInt(block_size/2.5);
ctx.font = fontSize+"px Arial";
var text = ctx.measureText(label); // TextMetrics object
ctx.fillStyle='black';
var x = i*block_size+block_size/2-text.width/2;
var y = j*block_size+block_size/2+fontSize/2.5;
ctx.fillText(label,x,y);
}
function backG(i,j,color) {
ctx.fillStyle = color;
ctx.fillRect(i*block_size, j*block_size, block_size, block_size);
}
</script>
</body>
</html>
Raw
new_sol.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="220" height="220"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var RED = '#ff6f6f99';
var WHITE = '#ffffff99';
var block_size = 30;
var block_num = 6;
ctx.strokeStyle='#555555';
ctx.lineWidth = 1;
ctx.translate(20,20);
ctx.fillStyle = '#eeeeee';
ctx.fillRect(0,0,block_num*block_size,block_num*block_size);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,block_num*block_size);
ctx.moveTo(0,0);
ctx.lineTo(block_num*block_size,0);
ctx.stroke();
for (var i = 0; i < block_num; i++) {
for (var j = 0; j < block_num; j++) {
ctx.beginPath();
ctx.moveTo((i+1)*block_size,(j+1)*block_size);
ctx.lineTo(i*block_size,(j+1)*block_size);
ctx.moveTo((i+1)*block_size,(j+1)*block_size);
ctx.lineTo((i+1)*block_size,j*block_size);
ctx.stroke();
// ctx.strokeRect(i*block_size, j*block_size, block_size, block_size);
}
}
var thinBackColor = '#f9de7f64';
// backG(2,2,thinBackColor);
// backG(1,2,thinBackColor);
// backG(2,1,thinBackColor);
// backG(3,3,thinBackColor);
// backG(3,4,thinBackColor);
// backG(4,3,thinBackColor);
// backG(2,3,thinBackColor);
// backG(2,4,thinBackColor);
// backG(1,3,thinBackColor);
// backG(3,2,thinBackColor);
// backG(4,2,thinBackColor);
// backG(3,1,thinBackColor);
//
// backG(1,1,thinBackColor);
// backG(0,1,thinBackColor);
// backG(0,2,thinBackColor);
// backG(0,3,thinBackColor);
//
// backG(3,5,thinBackColor);
// backG(2,5,thinBackColor);
// backG(1,5,thinBackColor);
// backG(1,4,thinBackColor);
// backG(0,4,thinBackColor);
// backG(0,5,thinBackColor);
var highLightBorderColor = '#b5a21e';
// fore
drawCircle(WHITE, 1,1, 'A1', highLightBorderColor);
drawCircle(WHITE, 2,1, 'B1');
drawCircle(WHITE, 3,1, 'C1');
drawCircle2(RED, 2,2, 'D');
drawCircle2(RED, 3,2, 'E');
drawCircle2(RED, 2,3, 'F');
drawCircle2(RED, 3,3, 'G');
drawCircle(WHITE, 0,4, 'D1');
ctx.translate(block_size*block_num/2,block_size*block_num/2);
ctx.rotate( Math.PI/2 );
ctx.translate(-block_size*block_num/2,-block_size*block_num/2);
drawCircle(WHITE, 1,1, 'A2');
drawCircle(WHITE, 2,1, 'B2');
drawCircle(WHITE, 3,1, 'C2');
drawCircle(WHITE, 0,4, 'D2', highLightBorderColor);
ctx.translate(block_size*block_num/2,block_size*block_num/2);
ctx.rotate( Math.PI/2 );
ctx.translate(-block_size*block_num/2,-block_size*block_num/2);
drawCircle(WHITE, 1,1, 'A3');
drawCircle(WHITE, 2,1, 'B3');
drawCircle(WHITE, 3,1, 'C3', highLightBorderColor);
drawCircle(WHITE, 0,4, 'D3');
ctx.translate(block_size*block_num/2,block_size*block_num/2);
ctx.rotate( Math.PI/2 );
ctx.translate(-block_size*block_num/2,-block_size*block_num/2);
drawCircle(WHITE, 1,1, 'A4');
drawCircle(WHITE, 2,1, 'B4', highLightBorderColor);
drawCircle(WHITE, 3,1, 'C4');
drawCircle(WHITE, 0,4, 'D4');
ctx.translate(block_size*block_num/2,block_size*block_num/2);
ctx.rotate( Math.PI/2 );
ctx.translate(-block_size*block_num/2,-block_size*block_num/2);
// first two white
ctx.strokeStyle = '#e43364';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(3*block_size,3*block_size);
ctx.lineTo(3*block_size,5*block_size);
ctx.lineTo(2*block_size,5*block_size);
ctx.lineTo(2*block_size,4*block_size);
ctx.lineTo(0*block_size,4*block_size);
ctx.lineTo(0*block_size,0*block_size);
ctx.lineTo(1*block_size,0*block_size);
ctx.lineTo(2*block_size,0*block_size);
ctx.lineTo(2*block_size,2*block_size);
ctx.lineTo(1*block_size,2*block_size);
ctx.lineTo(1*block_size,3*block_size);
ctx.lineTo(3*block_size,3*block_size);
//
// // third white
// ctx.moveTo(3*block_size,5*block_size);
// ctx.lineTo(2*block_size,5*block_size);
// ctx.lineTo(2*block_size,4*block_size);
//
// ctx.moveTo(2*block_size,4*block_size);
// ctx.lineTo(0*block_size,4*block_size);
// ctx.lineTo(0*block_size,1*block_size);
//
// ctx.moveTo(2*block_size,1*block_size);
// ctx.lineTo(2*block_size,2*block_size);
// ctx.lineTo(1*block_size,2*block_size);
// ctx.lineTo(1*block_size,3*block_size);
//
// // fifth
// ctx.moveTo(5*block_size,3*block_size);
// ctx.lineTo(5*block_size,4*block_size);
// ctx.lineTo(4*block_size,4*block_size);
// ctx.lineTo(4*block_size,6*block_size);
// ctx.lineTo(0*block_size,6*block_size);
// ctx.lineTo(0*block_size,4*block_size);
//
// // all
// ctx.moveTo(0*block_size,1*block_size);
// ctx.lineTo(0*block_size,0*block_size);
// ctx.lineTo(2*block_size,0*block_size);
// ctx.lineTo(2*block_size,1*block_size);
//
// ctx.moveTo(2*block_size,0*block_size);
// ctx.lineTo(6*block_size,0*block_size);
// ctx.lineTo(6*block_size,2*block_size);
// ctx.lineTo(4*block_size,2*block_size);
// ctx.lineTo(4*block_size,1*block_size);
// ctx.lineTo(3*block_size,1*block_size);
//
// ctx.moveTo(6*block_size,2*block_size);
// ctx.lineTo(6*block_size,6*block_size);
// ctx.lineTo(4*block_size,6*block_size);
ctx.stroke();
// uncertain
var uncertainBorderStyle = '#f7b775';
ctx.strokeStyle = uncertainBorderStyle;
ctx.lineWidth = 2;
ctx.beginPath();
// ctx.moveTo(2*block_size,1*block_size);
// ctx.lineTo(4*block_size,1*block_size);
// ctx.lineTo(4*block_size,2*block_size);
// ctx.lineTo(5*block_size,2*block_size);
// ctx.lineTo(5*block_size,3*block_size);
// ctx.lineTo(4*block_size,4*block_size);
// ctx.lineTo(4*block_size,5*block_size);
// ctx.lineTo(3*block_size,5*block_size);
// ctx.lineTo(2*block_size,4*block_size);
// ctx.lineTo(1*block_size,4*block_size);
// ctx.lineTo(1*block_size,2*block_size);
// ctx.lineTo(2*block_size,2*block_size);
// ctx.lineTo(2*block_size,1*block_size);
// ctx.moveTo(1*block_size,6*block_size);
// ctx.lineTo(1*block_size,4*block_size);
ctx.stroke();
ctx.strokeStyle = uncertainBorderStyle;
ctx.beginPath();
// ctx.moveTo(0*block_size,1*block_size);
// ctx.lineTo(2*block_size,1*block_size);
ctx.stroke();
function drawCircle(color, i, j, label, borderColor) {
var radius = block_size * 0.35;
var cx = i*block_size+block_size/2;
var cy = j*block_size+block_size/2;
ctx.fillStyle=color;
if (borderColor) {
ctx.strokeStyle=borderColor;
ctx.lineWidth = 2;
} else {
ctx.strokeStyle='black';
ctx.lineWidth = 1;
}
ctx.beginPath();
ctx.arc(cx,cy,radius,0,2*Math.PI);
ctx.fill();
ctx.stroke();
var fontSize = parseInt(block_size/2.5);
ctx.font = fontSize+"px Arial";
var text = ctx.measureText(label); // TextMetrics object
ctx.fillStyle='black';
var x = i*block_size+block_size/2-text.width/2;
var y = j*block_size+block_size/2+fontSize/2.5;
ctx.fillText(label,x,y);
}
function drawCircle2(color, i, j) {
var radius = block_size * 0.35;
var cx = i*block_size+block_size/2;
var cy = j*block_size+block_size/2;
ctx.fillStyle=color;
ctx.strokeStyle='black';
ctx.beginPath();
ctx.arc(cx,cy,radius,0,2*Math.PI);
ctx.fill();
ctx.stroke();
}
function backG(i,j,color) {
ctx.fillStyle = color;
ctx.fillRect(i*block_size, j*block_size, block_size, block_size);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment