どうも！LSSです！！
昨日に引き続き、アイコンをコードで描く、という挑戦を続けていました。
まぁだいたい、形になったかな？完成でいいかな、ってところです。
コード
<p>[]<canvas id="cv2" style="border: 1px solid white;" width="256" height="256"></canvas>[]</p>
<p><img width="64" height="64" id="s64" /> <img width="16" height="16" id="s16" /></p>
<script>// <![CDATA[
ctx=cv2.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,5);
ctx.lineTo(235,5);
ctx.lineTo(250,20);
ctx.lineTo(250,235);
ctx.lineTo(235,250);
ctx.lineTo(20,250);
ctx.lineTo(5,235);
ctx.lineTo(5,20);
ctx.closePath();
ctx.fillStyle='greenyellow';
ctx.fill();
for(i=0;i<300;i++){
mx=8+Math.random()*240;
my=8+Math.random()*240;
ctx.beginPath();
ctx.moveTo(127,127);
ctx.lineTo(mx,my);
ctx.lineWidth=1;
ctx.strokeStyle='#ccffcc';
ctx.stroke();
ctx.closePath();
}
//ここからアタリ
ctx.beginPath();
ctx.arc(127,127,127,0,Math.PI*2,true);
ctx.closePath();
ctx.strokeStyle='black';
ctx.lineWidth=1;
ctx.stroke();
ctx.beginPath();
ctx.rect(1,127,128,128);
ctx.closePath();
ctx.lineWidth=2;
ctx.strokeStyle='black';
ctx.stroke();
//ここまで
ctx.beginPath();
ctx.moveTo(65,22);
ctx.lineTo(25,120);
ctx.lineTo(100,110);
ctx.lineTo(110,90);
ctx.lineTo(42,105);
ctx.lineTo(95,10);
ctx.closePath();
ctx.strokeStyle='white';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='#5080ff';
ctx.fill();
ctx.beginPath();
ctx.moveTo(185,25);
ctx.lineTo(140,70);
ctx.lineTo(195,95);
ctx.lineTo(160,125);
ctx.lineTo(130,110);
ctx.lineTo(160,150);
ctx.lineTo(230,90);
ctx.lineTo(170,65);
ctx.lineTo(190,50);
ctx.lineTo(220,60);
ctx.closePath();
ctx.strokeStyle='white';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='orange';
ctx.fill();
ctx.beginPath();
ctx.moveTo(240,100);
ctx.lineTo(140,185);
ctx.lineTo(190,195);
ctx.lineTo(145,240);
ctx.lineTo(185,230);
ctx.lineTo(230,180);
ctx.lineTo(172,175);
ctx.lineTo(230,145);
ctx.closePath();
ctx.strokeStyle='white';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='deepskyblue';
ctx.fill();
ctx.beginPath();
ctx.moveTo(20,5);
ctx.lineTo(235,5);
ctx.lineTo(250,20);
ctx.lineTo(250,235);
ctx.lineTo(235,250);
ctx.lineTo(20,250);
ctx.lineTo(5,235);
ctx.lineTo(5,20);
ctx.closePath();
ctx.lineWidth=10;
ctx.strokeStyle='gold';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(97,217);
ctx.quadraticCurveTo(110,225,120,215);
ctx.quadraticCurveTo(110,235,97,215);
ctx.strokeStyle='black';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='white';
ctx.fill();
ctx.beginPath();
ctx.rect(16,140,108,30);
ctx.strokeStyle='black';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='white';
ctx.fill();
ctx.beginPath();
ctx.ellipse(70,225,30,30,0,0,Math.PI*2,true);
ctx.strokeStyle='black';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='white';
ctx.fill();
ctx.beginPath();
ctx.ellipse(70,214,30,10,0,0,Math.PI*2,true);
ctx.strokeStyle='black';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='white';
ctx.fill();
ctx.beginPath();
ctx.ellipse(97,217,5,5,0,0,Math.PI*2,true);
ctx.strokeStyle='black';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='white';
ctx.fill();
ctx.beginPath();
ctx.ellipse(70,175,56,40,0,0,Math.PI*2,true);
ctx.strokeStyle='black';
ctx.lineWidth=5;
ctx.stroke();
ctx.fillStyle='white';
ctx.fill();
ctx.beginPath();
ctx.moveTo(30,170);
ctx.lineTo(60,180);
ctx.lineTo(58,190);
ctx.lineTo(45,190);
ctx.lineTo(43,175);
ctx.closePath();
ctx.strokeStyle='black';
ctx.lineWidth=3;
ctx.stroke();
ctx.fillStyle='#666666';
ctx.fill();
ctx.moveTo(110,170);
ctx.lineTo(80,180);
ctx.lineTo(82,190);
ctx.lineTo(95,190);
ctx.lineTo(97,175);
ctx.closePath();
ctx.strokeStyle='black';
ctx.lineWidth=3;
ctx.stroke();
ctx.fillStyle='#666666';
ctx.fill();
ctx.moveTo(53,205);
ctx.lineTo(68,200);
ctx.lineTo(88,205);
ctx.strokeStyle='black';
ctx.lineWidth=3;
ctx.stroke();
s64.src=cv2.toDataURL();
s16.src=cv2.toDataURL();
// ]]></script>
左下に「まるいの」を配置してみました。
※まるいの＝このブログの隠れマスコットキャラみたいな存在。
位置的に、スターとしてアイコンが使用された際には完全に隠れる配置という仕様ですｗ
前記事にていただいたコメント、
から「なんか仕込もう！」と思い…「なんか」これしか思いつきませんでしたｗ
とりあえずこれで完成でいいかなぁ。
「これだけのコード（だいぶ長ったらしくなってはいますが）で、こういう絵が描けるんだ」となにかの参考になれば幸いです^^
追記！ダウンロード保存について
この方法で画像を制作したあと、画像ファイルとして保存する際には、下記のようなコードを追加します。
コード
<p><input id="btn" type="button" value="ダウンロードして保存" /></p>
<script>// <![CDATA[
btn.addEventListener('click',cvsave,false);
function cvsave(e){
clkd=document.createElement("a");
clkd.href=cv2.toDataURL("image/png");
clkd.download = 'download.png';
clkd.click();
}
// ]]></script>
※コード中、 cv2 のところは、canvasタグに入れたidの指定と合わせてください。
すると、
というボタンが現れ、これをクリックする事で描いた絵を画像ファイルとして保存する事ができます^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
元々の（というか今の）って、やっぱりスターを避けて作られてたんですか？隠れる所に何か仕込んでおいてもいいかもですね（笑）