Skip to content

Instantly share code, notes, and snippets.

@noonworks

noonworks/index.html

Last active May 4, 2016 17:41
Show Gist options
  • Save noonworks/61eb69caaa7e4954f06e390f8b0cbf3e to your computer and use it in GitHub Desktop.
Save noonworks/61eb69caaa7e4954f06e390f8b0cbf3e to your computer and use it in GitHub Desktop.
Download ZIP
fuyodo
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>腐葉土</title>
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
<style>
.AlluraFont { font-family: 'Allura'; }
table, td, th {
border-collapse: collapse;
border:1px solid #333;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>タイトル（上）</th>
<td><input class="f_inputs" type="text" id="title_top" name="title_top" value="ふようどっぽい" /></td>
</tr>
<tr>
<th>タイトル</th>
<td><input class="f_inputs" type="text" id="title_main" name="title_main" value="腐葉土本" /></td>
</tr>
<tr>
<th>タイトル（下）</th>
<td><input class="f_inputs" type="text" id="title_bottom" name="title_bottom" value="デザイン" /></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr><th></th><th>攻め</th><th>受け</th></tr>
</thead>
<tbody>
<tr>
<th>カラー</th>
<td><input class="f_inputs" type="color" id="color_seme" name="color_seme" value="#A541F0" /></td>
<td><input class="f_inputs" type="color" id="color_uke" name="color_uke" value="#55AAFF" /></td>
</tr>
<tr>
<th>名前</th>
<td><input class="f_inputs" type="text" id="name_seme" name="name_seme" value="攻めくん" /></td>
<td><input class="f_inputs" type="text" id="name_uke" name="name_uke" value="受けちゃん" /></td>
</tr>
<tr>
<th>名前（背景）</th>
<td><input class="f_inputs" type="text" id="name_seme2" name="name_seme2" value="Semekun" /></td>
<td><input class="f_inputs" type="text" id="name_uke2" name="name_uke2" value="Ukechan" /></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>タイトル下</th>
<td><input class="f_inputs" type="text" id="sub_text1" name="sub_text1" value="3種の" /></td>
<td><input class="f_inputs" type="text" id="sub_text2" name="sub_text2" value="ミックス" /></td>
</tr>
<tr>
<th>右の楕円</th>
<td><input class="f_inputs" type="text" id="circled_text1" name="circled_text1" value="ぷるるん" /></td>
<td><input class="f_inputs" type="text" id="circled_text2" name="circled_text2" value="新食感！" /></td>
</tr>
<tr>
<th rowspan="3">注意事項</th>
<td colspan="2"><input class="f_inputs" type="text" id="notice_title" name="notice_title" value="～お願い～" /></td>
</tr>
<tr>
<td><input class="f_inputs" type="text" id="notice_text1" name="notice_text1" value="小さなお子様や中高生の方は" /></td>
<td><input class="f_inputs" type="text" id="notice_text2" name="notice_text2" value="絶対に読まないでください。" /></td>
</tr>
<tr>
<td><input class="f_inputs" type="text" id="notice_text3" name="notice_text3" value="本製品は男性同士の性描写を含み、耐性のない方や" /></td>
<td><input class="f_inputs" type="text" id="notice_text4" name="notice_text4" value="18歳未満の方の購入はご遠慮いただいております。" /></td>
</tr>
</tbody>
</table>
<canvas id="maincanvas" width="420" height="600"></canvas>
<div class="AlluraFont">.</div>
<script>
(function(){
var green = 'rgb(15,80,10)';
var yellow = 'rgb(242,242,12)';
var red = 'rgb(200,40,40)';
var gold = 'rgb(175,155,95)';
var white = 'rgb(255,255,255)';
var black = 'rgb(0,0,0)';
function xScaleText(text, x, y, scale, fill, stroke) {
ctx.save();
ctx.scale(scale, 1);
if (stroke)
ctx.strokeText(text, x, y);
if (fill)
ctx.fillText(text, x, y);
ctx.restore();
}
function xScaleTextAlign(text, x1, x2, y, padding, max_scale, fill, stroke, align) {
if (typeof align != 'string') align = 'center';
align = align.toLowerCase();
var width = x2 - x1;
var w = ctx.measureText(text).width;
var scale = width / w;
if (max_scale > 0 && scale > max_scale) {
scale = max_scale;
switch (align) {
case 'left':
break;
case 'right':
padding += (width - w * scale) / scale;
break;
default:
padding += (width - w * scale) / 2 / scale;
}
}
xScaleText(text, x1 / scale + padding, y, scale, fill, stroke);
}
function pathEllipse(x1, y1, x2, y2) {
var xr = (x2 - x1) / 2; var yr = (y2 - y1) / 2;
var cx = (Math.sqrt(2.0) - 1.0) * xr * 4 / 3;
var cy = (Math.sqrt(2.0) - 1.0) * yr * 4 / 3;
ctx.beginPath();
ctx.moveTo(x1, y1 + yr);
ctx.bezierCurveTo(x1, y1 + yr - cy, x1 + xr - cx, y1, x1 + xr, y1);
ctx.bezierCurveTo(x1 + xr + cx, y1, x2, y1 + yr - cy, x2, y1 + yr);
ctx.bezierCurveTo(x2, y1 + yr + cy, x1 + xr + cx, y2, x1 + xr, y2);
ctx.bezierCurveTo(x1 + xr - cx, y2, x1, y1 + yr + cy, x1, y1 + yr);
}
var background_font_color = 'rgba(255,255,255,0.8)';
var background_font = "bold italic 56px 'Allura'";
var background_circle_font_color = white;
var background_circle_font = "30px 'Lucida Grande','segoe UI','Hiragino Maru Gothic ProN',Meiryo,Arial,sans-serif";
function background(ctx, color1, color2, name_s1, name_u1, name_s2, name_u2) {
// left back
var grad1 = ctx.createLinearGradient(0, 0, 0, 380);
grad1.addColorStop(0, color1);
grad1.addColorStop(1, white);
ctx.fillStyle = grad1;
ctx.fillRect(0, 25, 210, 275);
// left name
ctx.fillStyle = background_font_color;
ctx.font = background_font;
xScaleTextAlign(name_s2, 10, 200, 70, -3, 1.5, true, false);
// right back
var grad2 = ctx.createLinearGradient(0, 0, 0, 380);
grad2.addColorStop(0, color2);
grad2.addColorStop(1, white);
ctx.fillStyle = grad2;
ctx.fillRect(210, 25, 210, 275);
// left name
ctx.fillStyle = background_font_color;
ctx.font = background_font;
xScaleTextAlign(name_u2, 220, 410, 70, -3, 1.5, true, false);
// left circle
pathEllipse(40, 67, 180, 137);
ctx.fillStyle = yellow;
ctx.fill();
pathEllipse(43, 70, 177, 134);
ctx.fillStyle = color1;
ctx.fill();
// name on left circle
ctx.fillStyle = background_circle_font_color;
ctx.font = background_circle_font;
xScaleTextAlign(name_s1, 50, 170, 113, 0, 1.5, true, false);
// right circle
pathEllipse(250, 67, 390, 137);
ctx.fillStyle = yellow;
ctx.fill();
pathEllipse(253, 70, 387, 134);
ctx.fillStyle = color2;
ctx.fill();
// name on left circle
ctx.fillStyle = background_circle_font_color;
ctx.font = background_circle_font;
xScaleTextAlign(name_u1, 260, 380, 113, 0, 1.5, true, false);
}
function fukuro(ctx) {
// top
ctx.beginPath();
ctx.moveTo(0, 10);
for (var i = 0; i < 42; i++) {
ctx.lineTo(10 * i + 5, 0);
ctx.lineTo(10 * (i + 1), 10);
}
ctx.lineTo(420, 15);
ctx.lineTo(0, 15);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
ctx.fillStyle = gold;
ctx.fillRect(0, 17, 420, 5);
ctx.fillStyle = green;
ctx.fillRect(0, 24, 420, 5);
// bottom
ctx.beginPath();
ctx.moveTo(0, 590);
for (var i = 0; i < 42; i++) {
ctx.lineTo(10 * i + 5, 600);
ctx.lineTo(10 * (i + 1), 590);
}
ctx.lineTo(420, 585);
ctx.lineTo(0, 585);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
ctx.fillStyle = gold;
ctx.fillRect(0, 578, 420, 5);
ctx.fillStyle = green;
ctx.fillRect(0, 571, 420, 5);
// center rect
var left_x = 20;
var right_x = 400;
var top_y = 140;
var bottom_y = 320;
var border_radius = 15;
var line_width = 5;
ctx.lineWidth = 5;
// center rect back
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.fillRect(left_x, top_y + border_radius, right_x - line_width - border_radius, bottom_y);
// top of center rect
ctx.beginPath();
ctx.moveTo(left_x, top_y + border_radius * 2);
ctx.lineTo(left_x, top_y + border_radius);
ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
ctx.lineTo(right_x - border_radius, top_y);
ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
ctx.lineTo(right_x, top_y + border_radius * 2);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
// bottom of center rect
ctx.beginPath();
ctx.moveTo(left_x, bottom_y - border_radius * 2);
ctx.lineTo(left_x, bottom_y - border_radius);
ctx.quadraticCurveTo(left_x, bottom_y, left_x + border_radius, bottom_y);
ctx.lineTo(right_x - border_radius, bottom_y);
ctx.quadraticCurveTo(right_x, bottom_y, right_x, bottom_y - border_radius);
ctx.lineTo(right_x, bottom_y - border_radius * 2);
ctx.closePath();
ctx.fillStyle = green;
ctx.fill();
// side of center rect
ctx.fillStyle = green;
ctx.fillRect(left_x, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
ctx.fillRect(right_x - 5, top_y + border_radius * 2, 5, (bottom_y - top_y - border_radius * 4));
// bottom rect
left_x = 20;
right_x = 400;
top_y = 390;
bottom_y = 540;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(left_x, top_y + border_radius);
ctx.quadraticCurveTo(left_x, top_y, left_x + border_radius, top_y);
ctx.lineTo(right_x - border_radius, top_y);
ctx.quadraticCurveTo(right_x, top_y, right_x, top_y + border_radius);
ctx.lineTo(right_x, bottom_y - border_radius);
ctx.quadraticCurveTo(right_x, bottom_y, right_x - border_radius, bottom_y);
ctx.lineTo(left_x + border_radius, bottom_y);
ctx.quadraticCurveTo(left_x, bottom_y, left_x, bottom_y - border_radius);
ctx.closePath();
ctx.strokeStyle = black;
ctx.stroke();
// right circle
pathEllipse(240, 310, 400, 390);
ctx.fillStyle = yellow;
ctx.fill();
}
var title_font = "bold 93px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var title_sub_font = "20px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
function titles(ctx, top, main, bottom) {
top = top.split('').join(' ');
bottom = bottom.split('').join(' ');
// main
ctx.font = title_font;
ctx.strokeStyle = green;
ctx.fillStyle = green;
xScaleTextAlign(main, 29, 391, 270, 0, 1.5, true, true);
// top & bottom
ctx.font = title_sub_font;
ctx.fillStyle = white;
xScaleTextAlign(top, 40, 380, 163, 0, 1, true, false);
xScaleTextAlign(bottom, 40, 380, 313, 0, 1, true, false);
}
var circled_font = "'Hiragino Mincho Pro','MS Mincho','TakaoMincho'";
function circledText(ctx, text1, text2) {
ctx.save();
ctx.rotate(Math.PI / -16);
ctx.lineWidth = 1;
ctx.strokeStyle = red;
ctx.fillStyle = red;
// text1
ctx.font = 'bold 28px ' + circled_font;
xScaleTextAlign(text1, 180, 295, 403, 0, 1.5, true, true);
// text2
ctx.font = 'bold 26px ' + circled_font;
xScaleTextAlign(text2, 210, 315, 431, 0, 1.5, true, false);
ctx.restore();
}
var big1_font = "bold italic 80px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var sub_font = "bold italic 30px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
function sub(ctx, text1, text2) {
var big1 = text1.substring(0, 1);
var text1 = text1.substring(1, text1.length);
// compute scale
ctx.font = big1_font;
var big1_w = ctx.measureText(big1).width;
ctx.font = sub_font;
var text1_w = ctx.measureText(text1).width;
var text2_w = ctx.measureText(text2).width;
var width = big1_w + text1_w + text2_w;
var scale = 230 / width;
// big1
ctx.font = big1_font;
ctx.lineWidth = 5;
ctx.strokeStyle = yellow;
ctx.fillStyle = red;
xScaleText(big1, 10, 380, scale, true, true);
// text1
ctx.font = sub_font;
xScaleText(text1, 10 + big1_w, 375, scale, true, true);
// text2
ctx.fillStyle = green;
xScaleText(text2, 12 + big1_w + text1_w, 375, scale, true, true);
}
var notice_title_font = "bold 26px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var notice_text12_font = "bold 22px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
var notice_text34_font = "16px 'Hiragino Kaku Gothic ProN','Meiryo','Yu Gothic','MS PGothic','TakaoGothic'";
function notice(ctx, title, text1, text2, text3, text4) {
// title
ctx.fillStyle = red;
ctx.font = notice_title_font;
xScaleTextAlign(title, 30, 390, 420, 0, 1, true, false);
// text1, text2
ctx.font = notice_text12_font;
ctx.fillStyle = black;
xScaleTextAlign(text1, 30, 390, 450, 0, 1, true, false, 'left');
xScaleTextAlign(text2, 30, 390, 475, 0, 1, true, false, 'right');
// text3, text4
ctx.font = notice_text34_font;
xScaleTextAlign(text3, 30, 390, 500, 0, 1, true, false, 'left');
xScaleTextAlign(text4, 30, 390, 520, 0, 1, true, false, 'left');
}
function redraw() {
ctx.clearRect(0, 0, 420, 640);
// background
var semecolor = document.querySelector('#color_seme').value;
var ukecolor = document.querySelector('#color_uke').value;
var name_s1 = document.querySelector('#name_seme').value;
var name_u1 = document.querySelector('#name_uke').value;
var name_s2 = document.querySelector('#name_seme2').value;
var name_u2 = document.querySelector('#name_uke2').value;
background(ctx, semecolor, ukecolor, name_s1, name_u1, name_s2, name_u2);
// base
fukuro(ctx);
// text
var title_top = document.querySelector('#title_top').value;
var title_main = document.querySelector('#title_main').value;
var title_bottom = document.querySelector('#title_bottom').value;
titles(ctx, title_top, title_main, title_bottom);
// circled
var circled_text1 = document.querySelector('#circled_text1').value;
var circled_text2 = document.querySelector('#circled_text2').value;
circledText(ctx, circled_text1, circled_text2);
// sub
var sub_text1 = document.querySelector('#sub_text1').value;
var sub_text2 = document.querySelector('#sub_text2').value;
sub(ctx, sub_text1, sub_text2);
// notice
var notice_title = document.querySelector('#notice_title').value;
var notice_text1 = document.querySelector('#notice_text1').value;
var notice_text2 = document.querySelector('#notice_text2').value;
var notice_text3 = document.querySelector('#notice_text3').value;
var notice_text4 = document.querySelector('#notice_text4').value;
notice(ctx, notice_title, notice_text1, notice_text2, notice_text3, notice_text4);
}
var ua = navigator.userAgent.toLowerCase();
var isIE = (ua.indexOf('msie') > -1) || (ua.indexOf('trident/7') > -1);
var ctx;
function initialize() {
// set events
var inputs = document.querySelectorAll('.f_inputs');
for (var i = 0; i < inputs.length; i++) {
inputs[i].previous_value = inputs[i].value;
if (!isIE && inputs[i].type == 'color') {
inputs[i].addEventListener('change', function(e){
if (this.previous_value == this.value) return;
redraw();
this.previous_value = this.value;
});
} else {
inputs[i].addEventListener('keydown', function(e){
this.previous_value = this.value;
});
inputs[i].addEventListener('keyup', function(e){
if (this.previous_value == this.value) return;
redraw();
});
}
}
ctx = document.getElementById('maincanvas').getContext('2d');
// Trick from http://stackoverflow.com/questions/2635814/
var image = new Image;
image.src = 'https://fonts.googleapis.com/css?family=Allura';
image.onerror = redraw;
}
document.addEventListener('DOMContentLoaded', initialize);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment