ポケモンの発売日を何も考慮してなくて月火水を消費して錬成してます、すともです。
つまり初投稿だな！
独学かつ完璧にやる気は全くないのでグチャグチャな進行。
今日のお題はこちら
入力を引っこ抜く
テキストボックスを前回学んだ。
が、入力するだけである。
中身を使おう。
サンプルはこちら。
いきなり量が多すぎるっピ！
微妙に書き方も違うし……
見た感じテキストボックスは前のforを圧縮して中に入れたのは分かる。
ボタンもまぁボタンタイプで値がCheckで表示されてて名前がid。
<p id="msg"></p>
アスキーアートか？
押したときに表示されたから先に"msg"で場所を確保してる感じだろう。
<script>
機能の定義っぽい、メソッドはこっちにまとめるのか実はJavaScriptとか。
msgの型定義はないけどオブジェクト型で考えるのか？
脳みそがJavaしかないから分からん。
下の方もletが全部についてて分からん、インスタンス立ててって言われたらそれのような気がする。
addEventListenerがボタンとbutotnClick（これ誤字？）をまとめてるのか。
つまりこのインデントは……（ガバ）
機能の中で全部おっ立てて、元からあるやつを代入して紐づけする流れで見たら分かるような気がする。
入力してボタンで出力する流れは分かったので次行こう。
レイアウトを描画する
配置も知りたい。
でも脱線して図形を描きたくなったのでそこから（迷走）
サンプル
なんか芸術的～
ちゃんとJavaScriptでメソッドを作ってると明示してる。
canvas上に点とって線引っ張ってあとはオートで囲むのか。
この上に文字とか画像とか載せるのかはちょっと怪しさを感じるけどcanvasは悪用しそう。
順番的に描画の前では？（馬鹿）
ラジオボタンは一個のみ選択可能なやつ。
サンプル
見たまんま。
type id valueはいつも通りっぽくてnameが統一、これが関係性？
グループとして設定されるのだろう。
さりげなくボタンがsubmitになっててこれは分からん。
適当に漁ってみた感じ最初のボタンはただクリックできるだけ、submitは情報を送信するっぽい。
どこだよ。
まぁ今回のやりたいことには影響ないので飛ばす。
画像ジェネレータVol.0
ラジオボタンで画像の色塗りをしたらそれはジェネレータなのでは？
というわけで作成に取り掛かる。
ラジオボタンで色指定、テキストボックスで名前を作ってボタンで出力する。
道中でメソッドの知識とか必要でクソほど迷走して夢の中でコード書いてた。
僕のぐっすりタイプ睡眠を犠牲にして完成。
初期配置はこちら
適当にボタンを操作して出力すると……？
だいぶそれっぽく出来て一人で爆笑して転がってた。
なんかやれば出来るもんらしいっすね。
下にコード貼っとくのでやりたい人はメモ帳に貼って、拡張子をhtmlにしたら出来ると思います。
次回の更新は未定、ほなまた。
<html>
<head>
<title>yaju_paint</title>
</head>
<body>
<p>自分だけの名画を作ろう！</p>
<p>
左上
<input type="radio" id="inq1" name="num_of_inq1" value="1" checked>
<label for="inq1">teal</label>
<input type="radio" id="inq2" name="num_of_inq1" value="2">
<label for="inq2">灰色</label>
<input type="radio" id="inq3" name="num_of_inq1" value="3">
<label for="inq3">紺色</label>
<input type="radio" id="inq4" name="num_of_inq1"
value="4">
<label for="inq3">茶色</label>
</p>
<p>
右上
<input type="radio" id="inq1" name="num_of_inq2" value="1" checked>
<label for="inq1">teal</label>
<input type="radio" id="inq2" name="num_of_inq2" value="2">
<label for="inq2">灰色</label>
<input type="radio" id="inq3" name="num_of_inq2" value="3">
<label for="inq3">紺色</label>
<input type="radio" id="inq4" name="num_of_inq2"
value="4">
<label for="inq3">茶色</label>
</p>
<p>
下
<input type="radio" id="inq1" name="num_of_inq3" value="1" checked>
<label for="inq1">teal</label>
<input type="radio" id="inq2" name="num_of_inq3" value="2">
<label for="inq2">灰色</label>
<input type="radio" id="inq3" name="num_of_inq3" value="3">
<label for="inq3">紺色</label>
<input type="radio" id="inq4" name="num_of_inq3"
value="4">
<label for="inq3">茶色</label>
</p>
<p>
中央
<input type="radio" id="inq1" name="num_of_inq4" value="1" checked>
<label for="inq1">teal</label>
<input type="radio" id="inq2" name="num_of_inq4" value="2">
<label for="inq2">灰色</label>
<input type="radio" id="inq3" name="num_of_inq4" value="3">
<label for="inq3">紺色</label>
<input type="radio" id="inq4" name="num_of_inq4"
value="4">
<label for="inq3">茶色</label>
</p>
<label>名前：<input type="text" id="nameText"></label>
<p><input type="button"
value="描画する" id="checkButton"></p>
<p id="msg"></p>
function draw(){
var
canvas = document.getElementById('sample');
var ctx =
canvas.getContext('2d');
//色決定メソッド、スコープが分からんので内部
function defineColor(radioX){
let leng = radioX.length;
//選択されているボタンを探して値を取り出す
for (let i = 0; i < leng; i++){
if (radioX.item(i).checked){
if(radioX.item(i).
value == 1){
ctx.fillStyle = '#008080'
}
else if(radioX.item(i).
value == 2){
ctx.fillStyle = '#c0c0c0'
}
else if(radioX.item(i).
value == 3){
ctx.fillStyle = '#003366'
}
else{
ctx.fillStyle = '#cc9966'
}
}
}
}
//塗りつぶし
ctx.beginPath();
ctx.moveTo(200,150);
ctx.lineTo(200,10);
ctx.lineTo(10,10);
ctx.lineTo(10,200);
ctx.closePath();
defineColor(radio1);
ctx.fill();
//塗りつぶし
ctx.beginPath();
ctx.moveTo(200,150);
ctx.lineTo(200,10);
ctx.lineTo(390,10);
ctx.lineTo(390,200);
ctx.closePath();
defineColor(radio2);
ctx.fill();
//塗りつぶし
ctx.beginPath();
ctx.moveTo(200,150);
ctx.lineTo(10,200);
ctx.lineTo(10,290);
ctx.lineTo(390,290);
ctx.lineTo(390,200);
ctx.closePath();
ctx.fill();
//塗りつぶし
ctx.beginPath();
ctx.arc( 200, 150, 75, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
ctx.closePath();
ctx.fill();
}
msg.innerText = '名画：' + nameText.
value;
}
let radio1 = document.getElementsByName('num_of_inq1');
let radio2 = document.getElementsByName('num_of_inq2');
let
radio3 = document.getElementsByName('num_of_inq3');
let
radio4 = document.getElementsByName('num_of_inq4');
let nameText = document.getElementById('nameText');
nameText.
value = 'yjspni';
let msg = document.getElementById('msg');
let checkButton = document.getElementById('checkButton');
checkButton.addEventListener('click', draw);
</script>
</body>
</html>
