practice

　　　　

<html>
<meta charset="utf-8">

<link rel="icon"type="image/png"href="favicon.png">
<style>
body{color:#000000;
margin:10px;
background-color:#ffffff;
font-size:16px;
text-align:center;
line-height:24px;
letter-spacing:2px;
word-break:break-all;
word-wrap:break-word;}
canvas{border:solid 1px black;}
.テーブル_セット{background-color:#ffffff;
border-collapse:collapse;
color:#000000;
margin-top:5px;
margin-left:5px;
margin-bottom:10px;
width:760px;}
.テーブル_セット th{text-align:center;
border:1px #666666 solid;
padding:3px 5px;
background-color:#eeeeee;
font-size:9pt;}
.テーブル_セット td{border:1px #666666 solid;
padding:6px;
letter-spacing:1px;
font-size:9pt;}
#さんぷる_01{overflow:scroll;
white-space:pre;
margin:0px;
padding:5px;
text-align:left;
height:400px;
min-width:97%;
line-height:1.4;
color:#ffffff;
background-color:#333333;}
.右で保存{margin:0;
padding:10px;
text-align:center;
font-size:16pt;
font-weight:bold;
background-color:#ffffff;
border:none;}
.パレット{margin:4px;
padding:2px;
background-color:#eeeeee;
border:2px dashed #456789;}
hr{width:100%;
background-color:#c5eaea;}
#formWrap{width:800px;
margin:0 auto;
color:#333333;
line-height:120%;
font-size:100%;}
div.BOX_02{clear:both;
border:1px solid #abcdef;
margin-bottom:15px;
padding:14px 14px 14px 14px;
text-align:left;
overflow:hidden;
background-color:#ffffff;
border-radius:6px;
box-shadow:4px 4px 4px 0px #abcdef;}
.center{text-align:center;
width:100%;
margin-top:-14px;
margin-left:-38px;}
</style>

<div id="formWrap">
<div class="BOX_02">
<div class="center"><img src="painting.png"></div>
<main>
<table class="テーブル_セット テーブル_横">
<tbody>
<tr>
<th>線の種類</th>
<td>
<label><input type="radio"name="たいぷ類"value="free"checked> Freehand </label>
<label><input type="radio"name="たいぷ類"value="line"> Line </label>
<label><input type="radio"name="たいぷ類"value="rect"> Rect(Border) </label>
<label><input type="radio"name="たいぷ類"value="fillrect"> Rect(Fill)</label><br>
<label><input type="radio"name="たいぷ類"value="arc"> Arc(Border) </label>
<label><input type="radio"name="たいぷ類"value="fillarc"> Arc(Fill) </label>
<label><input type="radio"name="たいぷ類"value="erase"> Erase(Line) </label>
<label><input type="radio"name="たいぷ類"value="clear"> Clear-Area</label>
</td>
</tr>
<tr>
<th>線の色</th>
<td>
<label><input type="radio"name="線色"value="red"checked> Red </label>
<label><input type="radio"name="線色"value="green"> Green </label>
<label><input type="radio"name="線色"value="blue"> Blue </label>
<label><input type="radio"name="線色"value="yellow"> Yellow </label>
<label><input type="radio"name="線色"value="#ff00ff"> Pink </label>
<label><input type="radio"name="線色"value="#00ff00"> Lime </label>
<label><input type="radio"name="線色"value="black"> Black </label>
<label><input type="radio"name="線色"value="white"> White</label>
</td>
</tr>
<tr>
<th>線の太さ</th>
<td>
<label><input type="radio"name="線太さ"value="Light"checked> Light </label>
<label><input type="radio"name="線太さ"value="Regular"> Regular </label>
<label><input type="radio"name="線太さ"value="Medium"> Medium </label>
<label><input type="radio"name="線太さ"value="DemiBold"> DemiBold </label>
<label><input type="radio"name="線太さ"value="Bold"> Bold </label>
<label><input type="radio"name="線太さ"value="ExtreBold"> ExtreBold </label>
<label><input type="radio"name="線太さ"value="Heavy"> Heavy</label>
</td>
</tr>
</tbody>
</table>
<div class="パレット">
<canvas id="範囲"width="600"height="600"
onMouseDown="まうす_おん(event)"
onMouseMove="まうす_むーぶ(event)"
onMouseUp="まうす_あっぷ(event)">
</canvas>
<input id="ほぞん"name="ほぞん"type="button"value="保存"onclick="ふぁいる();">
<button onclick="りろーど()">リセット</button>
</div>
<div id="取り込み">
<div class="右で保存">600 × 600 px / image File として保存(右クリック)</div>
<div class="パレット"><img id="私の作品"></div>
</div>
</main>
</div>
</div>

<script>
let ぼっくす_01=9;
let びゅー="";
let 範囲=0;
window.onload=function()
{if(範囲 !=1)
{let 書き込み=document.getElementsByClassName(" ");
for(let 愛=0;愛<書き込み.length;愛++)
{if(書き込み[愛].style.maxWidth=="")
{if(書き込み[愛].clientWidth==0)
{if(書き込み[愛].getAttribute("width"))
{書き込み[愛].style.maxWidth=書き込み[愛].getAttribute("width")+"px";}}
else
{書き込み[愛].style.maxWidth=書き込み[愛].clientWidth+"px";}}
書き込み[愛].style.width="100%";
書き込み[愛].style.height="auto";}}
if(typeof 読み込み=="function")
{読み込み();}
if(typeof ページ内=="function")
{ページ内();}}
window.onresize=あーと;
function あーと()
{if(範囲==1){return;}
let 横_風景=document.getElementById("横").clientWidth;
if(document.getElementById("ぐりっど"))
{if(横_風景<これ)
{if(ぼっくす_01 !=0)
{document.getElementById("ぐりっど").style.display="block";
document.getElementById("筆").style.display="none";
ぼっくす_01=0;}}
else
{if(ぼっくす_01 !=1)
{document.getElementById("ぐりっど").style.display="none";
document.getElementById("筆").style.display="block";
ぼっくす_01=1;}}}
if(typeof ページ内=="function")
{ページ内();}}
function すくりーん(key,val)
{let 本日=new Date;
本日.setHours(本日.getHours()+12);
let りみっと_日付=本日.toGMTString();
let 記録=key+"="+escape(val)+";path=/;";
記録+="expires="+りみっと_日付;
document.cookie=記録;}
function 読み込み()
{document.getElementById("取り込み").style.display="none";
document.getElementById("見た目").style.display="none";}
function まあ()
{さいず=document.getElementById("見た目");
if(さいず.style.display=="none")
{さいず.style.display="";}
switch(たいぷ)
{case"free":
case"erase":
break;
case"clear":
情報_1+="let 高さ_距離=よこ横-横書き_ぺいんと;<br>";
情報_1+="let 幅_距離=たて縦-縦書き_ぺいんと;<br>";
情報_1+="座標.clearRect(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,幅_距離);<br>";
break;
switch(たいぷ)
{case"fillrect":
case"fillarc":
情報_1+="座標.fillStyle=\""+色の設定+"\";<br>";
break;
default:
情報_1+="座標.strokeStyle=\""+色の設定+"\";<br>";
break;}
情報_1+="<br>";
情報_1+="座標.lineWidth="+幅_計算_せっと+";<br>";
情報_1+="<br>";
情報_1+="座標.lineCap=\"丸み\";<br>";
case"rect":
情報_1+="let 高さ_距離=よこ横-横書き_ぺいんと;<br>";
情報_1+="let 幅_距離=たて縦-縦書き_ぺいんと;<br>";
情報_1+="座標.strokeRect(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,幅_距離);<br>";
break;
case"fillrect":
情報_1+="let 高さ_距離=よこ横-横書き_ぺいんと;<br>";
情報_1+="let 幅_距離=たて縦-縦書き_ぺいんと;<br>";
情報_1+="座標.fillRect(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,幅_距離);<br>";
break;
case"arc":
情報_1+="let 高さ_距離=よこ横-横書き_ぺいんと;<br>";
情報_1+="座標.arc(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,0,Math.PI*2,false);<br>";
情報_1+="座標.stroke();<br>";
break;
case"fillarc":
情報_1+="let 高さ_距離=よこ横-横書き_ぺいんと;<br>";
情報_1+="座標.arc(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,0,Math.PI*2,false);<br>";
情報_1+="座標.fill();<br>";
break;
default:
情報_1+="座標.moveTo(横書き_ぺいんと,縦書き_ぺいんと);<br>";
情報_1+="座標.lineTo(よこ横,たて縦);<br>";
情報_1+="座標.stroke();<br>";
break;}
情報_1+="<br>";
情報_1+="まうす_だうん=false;}}<br>";
let 連続=情報_1+"<br>"+情報B4;
連続=連続.replace(/</g,"<");
連続=連続.replace(/>/g,">");
連続=連続.replace(/="/g,"\"");
連続=連続.replace(/<br>/g,"\n");
document.getElementById("さんぷる_01").value=連続;}
let まうす_だうん=false;
let 筆跡=0;
let 横書き_ぺいんと=0;
let 縦書き_ぺいんと=0;
let よこ横;
let たて縦;
let 描く;
let 座標;
let たいぷ;
let 色の設定="black";
let 幅_計算;
let 幅_計算_せっと=15;
function まうす_おん(event)
{まうす_だうん=true;
筆跡=event.target.getBoundingClientRect();
横書き_ぺいんと=event.clientX-筆跡.left;
縦書き_ぺいんと=event.clientY-筆跡.top;}
function まうす_むーぶ(event)
{let ぼたん類;
if(まうす_だうん){ぼたん類=document.getElementsByName("たいぷ類");
for(let 合=0;合< ぼたん類.length;合++)
{if(ぼたん類[合].checked)
{たいぷ=ぼたん類[合].value;
break;}}
ぼたん類=document.getElementsByName("線色");
for(let 相=0;相<ぼたん類.length;相++)
{if(ぼたん類[相].checked)
{色の設定=ぼたん類[相].value;
break;}}
ぼたん類=document.getElementsByName("線太さ");
for(let 会=0;会<ぼたん類.length;会++)
{if(ぼたん類[会].checked)
{幅_計算=ぼたん類[会].value;
break;}}
描く=document.getElementById("範囲");
座標=描く.getContext("2d");
よこ横=event.clientX-筆跡.left;
たて縦=event.clientY-筆跡.top;
座標.beginPath();
座標.strokeStyle=色の設定;
座標.fillStyle=色の設定;
switch(幅_計算)
{case"Light":
幅_計算_せっと=1;
break;
case"Regular":
幅_計算_せっと=3;
break;
case"Medium":
幅_計算_せっと=6;
break;
case"DemiBold":
幅_計算_せっと=9;
break;
case"Bold":
幅_計算_せっと=12;
break;
case"ExtreBold":
幅_計算_せっと=15;
break;
case"Heavy":
幅_計算_せっと=18;
break;}
座標.lineWidth=幅_計算_せっと;
座標.lineCap="round";
switch(たいぷ)
{case"free":
case"erase":
if(たいぷ=="free")
{座標.globalCompositeOperation="source-over";}
else
{座標.globalCompositeOperation="destination-out";}
座標.moveTo(横書き_ぺいんと,縦書き_ぺいんと);
座標.lineTo(よこ横,たて縦);
座標.stroke();
横書き_ぺいんと=よこ横;
縦書き_ぺいんと=たて縦;
break;
default:
break;}}}
function まうす_あっぷ(event)
{if(まうす_だうん)
{座標.globalCompositeOperation="source-over";
switch(たいぷ)
{case"free":
case"erase":
break;
case"clear":
高さ_距離=よこ横-横書き_ぺいんと;
幅_距離=たて縦-縦書き_ぺいんと;
座標.clearRect(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,幅_距離);
break;
case"rect":
高さ_距離=よこ横-横書き_ぺいんと;
幅_距離=たて縦-縦書き_ぺいんと;
座標.strokeRect(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,幅_距離);
break;
case"fillrect":
高さ_距離=よこ横-横書き_ぺいんと;
幅_距離=たて縦-縦書き_ぺいんと;
座標.fillRect(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,幅_距離);
break;
case"arc":
var 高さ_距離=よこ横-横書き_ぺいんと;
座標.arc(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,0,Math.PI*2,false);
座標.stroke();
break;
case"fillarc":
高さ_距離=よこ横-横書き_ぺいんと;
座標.arc(横書き_ぺいんと,縦書き_ぺいんと,高さ_距離,0,Math.PI*2,false);
座標.fill();
break;
default:
座標.moveTo(横書き_ぺいんと,縦書き_ぺいんと);
座標.lineTo(よこ横,たて縦);
座標.stroke();
break;}
まうす_だうん=false;}}
function ふぁいる()
{さいず=document.getElementById("取り込み");
if(さいず.style.display=="none")
{さいず.style.display="";}
else
{さいず.style.display="none";
return;}
書き出し=描く.toDataURL();
document.getElementById("私の作品").src=書き出し;}
function りろーど()
{document.location.reload();}
</script>

</html>