WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

SouceTreeを使用してGitHubにファイルをプッシュする

GitクライアントのSouceTreeを使用してGitHubにファイルをプッシュする。

事前準備

GitHubのアカウントを取得する。
github.com

公式サイトからSouceTreeをダウンロードする。
ja.atlassian.com

GitHubリポジトリを作成する

f:id:mmmmofu:20180419125417p:plain

自分のプロフィールページから「Repositories」を開く

開いたページの「NEW」ボタンをクリック

f:id:mmmmofu:20180427174351p:plain

Repository name

リポジトリの名前を記入

Description (optional)

説明文を記入。書いても書かなくても良い

Public / Private

Public(公開)かPrivate(非公開)か選択
GitHubはPrivate(非公開)の場合有料となる。

Initialize this repository with a README

README.mdというファイルを作成するか
リポジトリのTOPに表示されます。)

Add .gitignore None

ファイル管理しないファイルを指定できる『.gitignore』というファイルを作成し、
ファイル管理しないファイルを指定する。

関連記事

mmmmofu.hatenablog.com

Add a license None

LICENSEというファイルを作成し、一般的なライセンス文を記載する。


記入、選択が終わったら『Create repository』をクリックするとリポジトリが作成される。

f:id:mmmmofu:20180501104321p:plain

作成したリポジトリを開き、緑色の『Clone or download』ボタンを押す
URLが表示されるのでコピーする。

SouceTreeでファイルをプッシュする

広告を非表示にする

canvas 円を描く

こちらを参考にしました。
developer.mozilla.org

デモ
http://efu.sakura.ne.jp/web/canvas/index3.html

円の描画でスマイリーフェイスを作成

円、円弧を描く

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x、 yで指定した位置を中心、r を半径、startAngle を開始位置、endAngle を終端、anticlockwise を方向 (デフォルトは時計回り) とする円弧を描きます。

x、yで指定した位置にペンを移動

moveTo(x, y)

f:id:mmmmofu:20180419121849p:plain

<canvas id="canvas04" width="300" height="300">
  <!-- 代替コンテンツ -->
  canvasが有効なブラウザを使用してください。
</canvas>
<canvas id="canvas05" width="300" height="300">
  <!-- 代替コンテンツ -->
  canvasが有効なブラウザを使用してください。
</canvas>
/*++ 円の描画でスマイリーフェイスを作成 +++++++++++++++++++++++*/

var canvas3 = document.getElementById('canvas04');
var ctx3 = canvas3.getContext('2d');

var canvas4 = document.getElementById('canvas05');
var ctx4 = canvas4.getContext('2d');

//新しいパスを作成
ctx3.beginPath();
ctx4.beginPath();

//円・円弧を描く
//Math.PIは円周率、約3.14159を表す

//moveTo()を使用しない場合
ctx3.arc(75,75,50,0,Math.PI*2,true);//円弧を描く・外の円
ctx3.arc(75,75,35,0,Math.PI,false);//円弧を描く・口(時計回り)
ctx3.arc(60,65,5,0,Math.PI*2,true);//円弧を描く・左目
ctx3.arc(90,65,5,0,Math.PI*2,true);//円弧を描く・右目

//moveTo()を使用した場合
ctx4.arc(75,75,50,0,Math.PI*2,true);//円弧を描く・外の円
ctx4.moveTo(110,75);//指定した位置にペンを移動する
ctx4.arc(75,75,35,0,Math.PI,false);//円弧を描く・口(時計回り)
ctx4.moveTo(65,65);//指定した位置にペンを移動する
ctx4.arc(60,65,5,0,Math.PI*2,true);//円弧を描く・左目
ctx4.moveTo(95,65);//指定した位置にペンを移動する
ctx4.arc(90,65,5,0,Math.PI*2,true);//円弧を描く・右目

//輪郭をなぞる方式で図形を描く
ctx3.stroke();
ctx4.stroke();

for文を使用し複数の円または円弧を作成

f:id:mmmmofu:20180419121911p:plain

<canvas id="canvas06" width="300" height="300">
    <!-- 代替コンテンツ -->
    canvasが有効なブラウザを使用してください。
</canvas>
/*++ for文を使用し複数の円または円弧を作成 +++++++++++++++++++++++*/

var canvas5 = document.getElementById('canvas06');
var ctx5 = canvas5.getContext('2d');

for(var i=0; i<4; i++) {
  for(var j=0; j<3; j++) {
    ctx5.beginPath();//新しいパスを作成
    var x = 25+j*50;//xの座標
    var y = 25+i*50;//yの座標
    var radius = 20;//円の半径
    var startAngle = 0;//円の始点
    var endAngle = Math.PI+(Math.PI*j)/2;
    var anticlockwise = i%2==0 ?false : true; // 時計回りまたは反時計回り
    ctx5.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    if (i>1){
      ctx5.fill();//塗りつぶす
    } else {
      ctx5.stroke();//輪郭をなぞる方式で図形を描く
    }
  }
}
広告を非表示にする

canvas 図形を描く

こちらを参考にしました。
developer.mozilla.org

前回の記事
mmmmofu.hatenablog.com

デモ
http://efu.sakura.ne.jp/web/canvas/index2.html

矩形を描く

canvas は 「矩形」(四角形)のみをサポートしています。

矩形 塗りつぶされた矩形を描く

ctx.fillRect(x, y, width, height);

矩形の輪郭を描く

ctx.strokeRect(x, y, width, height);

矩形 指定した領域が透明になる

ctx.clearRect(x, y, width, height);

f:id:mmmmofu:20180418124034j:plain

  <canvas id="canvas02" width="300" height="300">
    <!-- 代替コンテンツ -->
    canvasが有効なブラウザを使用してください。
  </canvas>
/*++++++++++++++++++++++++++++++++++
矩形を描く
++++++++++++++++++++++++++++++++++*/

var canvas = document.getElementById('canvas02');

var ctx = canvas.getContext('2d');

//塗りつぶされた矩形を描く
ctx.fillRect(25, 25, 100, 100);

//矩形の輪郭を描く
ctx.strokeRect(100, 100, 50, 50);

//指定した領域が透明になる
ctx.clearRect(25, 25, 60, 60);

三角形を描く

f:id:mmmmofu:20180418124055j:plain
矩形以外の図形はパスで描く必要があります。

直線を描く

lineTo(x, y)
現在の描画位置から x と y で指定した位置に線を描きます。

  <canvas id="canvas03" width="300" height="300">
    <!-- 代替コンテンツ -->
    canvasが有効なブラウザを使用してください。
  </canvas>
/*++++++++++++++++++++++++++++++++++
三角形を描く
++++++++++++++++++++++++++++++++++*/

var canvas2 = document.getElementById('canvas03');

var ctx2 = canvas2.getContext('2d');

//新しいパスを作成
ctx2.beginPath();

//指定した座標にペンを移動
ctx2.moveTo(0,100);

//指定した位置に線を描く
ctx2.lineTo(150,200);
ctx2.lineTo(150,0);

//パス内を塗りつぶす
ctx2.fill();
広告を非表示にする