概要
paiza.ioでelixirやってみた。
練習問題やってみた。
練習問題
錬成陣を描け。
サンプルコード
IO.puts """
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background: #fdf;
font: 30px sans-serif;
}
</style>
</head>
<body>
<canvas id='canvas' width='460' height='460'></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.translate(200, 200);
ctx.scale(0.9, 0.9);
function strokeStyle(s) {
ctx.strokeStyle = s;
}
function setShadow(s0, s1, s2, s3) {
ctx.shadowColor = s0;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 5;
}
function beginPath() {
ctx.beginPath();
}
function lineWidth(s) {
ctx.lineWidth = s;
}
function moveTo(s, e) {
ctx.moveTo(s, e);
}
function lineTo(s, e) {
ctx.lineTo(s, e);
}
function stroke() {
ctx.stroke();
}
function strokePolygon(x, y, size, vertex, angle) {
var cx;
var cy;
var nx;
var ny;
beginPath();
for (var i = 0; i < vertex; i++)
{
cx = size * Math.cos(((2 * Math.PI) / vertex) * i - angle / 180);
cy = size * Math.sin(((2 * Math.PI) / vertex) * i - angle / 180);
nx = size * Math.cos(((2 * Math.PI) / vertex) * (i + 1) - angle / 180);
ny = size * Math.sin(((2 * Math.PI) / vertex) * (i + 1) - angle / 180);
ctx.moveTo(cx + x, cy + y);
ctx.lineTo(nx + x, ny + y);
}
stroke();
}
function strokeLines(s0, s1, s2, s3, s4, s5) {
beginPath();
ctx.moveTo(s0, s1);
ctx.lineTo(s2, s3);
ctx.lineTo(s4, s5);
ctx.lineTo(s0, s1);
stroke();
}
function strokeRect(s0, s1, s2, s3) {
beginPath();
ctx.rect(s0, s1, s2, s3);
stroke();
}
function strokeCircle(s0, s1, s2) {
beginPath();
ctx.arc(s0, s1, s2, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
stroke();
}
function arc(s0, s1, s2, s3, s4, s5) {
ctx.arc(s0 , s1, s2, s3, s4, s5);
}
"""
IO.puts """
lineWidth(5);
strokeStyle("white");
setShadow("white", 0, 0, 10);
strokeRect(-150, -150, 300, 300);
strokeLines(-150, 150, 0, -150, 150, 150);
strokeLines(150, -150, 0, 150, -150, -150);
strokeLines(-150, -150, 150, 0, -150, 150);
strokeLines(150, -150, -150, 0, 150, 150);
strokeCircle(-150, -150, 50);
strokeCircle(150, -150, 50);
strokeCircle(-150, 150, 50);
strokeCircle(150, 150, 50);
strokeCircle(0, 0, 212);
"""
IO.puts """
</script>
</body>
</html>
"""
成果物
以上。