Skip to content

Instantly share code, notes, and snippets.

@hyuki0000

hyuki0000/canvas.js

Created April 5, 2017 13:14
Show Gist options
  • Save hyuki0000/0ed09c729e81a7ef2f7f0820f43eb33d to your computer and use it in GitHub Desktop.
Save hyuki0000/0ed09c729e81a7ef2f7f0820f43eb33d to your computer and use it in GitHub Desktop.
Download ZIP
九九の表に類似した100x100の表で、積がnで割り切れる点を黒く塗る。
Raw
canvas.js
$(function(){
var current = 1;
function drawit(n) {
var ctx = $('#canvas')[0].getContext('2d');
var size = 5;
var screen = 500;
var cols = screen / size;
for (var y = 0; y < cols; y++) {
for (var x = 0; x < cols; x++) {
if ((x+1) * (y+1) % n == 0) {
ctx.fillStyle = 'black';
} else {
ctx.fillStyle = 'white';
}
ctx.strokeStyle = 'lightgray';
ctx.fillRect(x * size, y * size, size, size);
ctx.strokeRect(x * size, y * size, size, size);
}
}
$('#label').text("n = " + current);
}
setInterval(function() {
drawit(current);
current += 1;
}, 500);
})();
Raw
index.html
<!DOCTYPE html>
<html>
<body>
<div id="label"></div>
<canvas id="canvas" width="500" height="500" style="border:1px solid black;">canvas is not supported.</canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="canvas.js"></script>
</script>
</body>
</html>
@hyuki0000
Copy link
Author

ループ内の処理を以下のようにすると、剰余を色相に割り当てることができる。

        var hue = ((x+1) * (y+1) % n) * 360.0 / n
        var color = "hsl(" + hue + ", 100%, 50%)";
        ctx.fillStyle = color;
        ctx.strokeStyle = 'lightgray';
        ctx.fillRect(x * size, y * size, size, size);
        ctx.strokeRect(x * size, y * size, size, size);

n=50

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment