Skip to content

Instantly share code, notes, and snippets.

@hyuki0000 hyuki0000/canvas.js
Created Apr 5, 2017

Embed
What would you like to do?
九九の表に類似した100x100の表で、積がnで割り切れる点を黒く塗る。
$(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);
})();
<!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

This comment has been minimized.

Copy link
Owner Author

hyuki0000 commented Apr 6, 2017

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

        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
You can’t perform that action at this time.