JavaScriptのCanvasとrotate()関数を使って動く時計を描画してみる
まずHTML側は とした。ページ読込時にinit関数を呼び出して、そこでキャンバスの設定を行う予定。キャンバスのサイズは250x250の黄色。 init関数は以下のように。 グローバル変数でctxと、intervalID を宣言。 tran...
muku@happi.18
JavaScriptのCanvasのsave()とrestore()関数の使い方
キャンバスの状態を保存するsave()関数と、 保存した状態を復元するrestore()関数の使い方をやっていきます。 以下の順序でやります。 １．塗りつぶしの色と、座標系を保存して、 ２．塗りつぶしの色と、座標系を移動して、 ３．塗りつぶ...
JavaScriptのCanvasのtranslate()関数の使い方と意味
この記事の主題は「canvasのtranslateで座標の中心を移動させることができる」というこです。 ★例えば 描画領域の左上の座標は(0,0)となっているので、円を描くときに(0,0)を中心に円を描いてしまうと下図のようにおおかしなこと...
テックアカデミー テックアカデミーのスタートダッシュキャンペーンに申し込みした
僕はテックアカデミーのWEBアプリケーションコースに申し込みをしてRailsでプログラミングを学習しています。その申込をしたときにキャンペーンでもう1つ受講をプレゼントしてもらいました。それをご紹介したいと思います。 テックアカデミーのスタ...
JavaScriptでサイコロ転がし – Canvasに画像（DrawImage）をランダム表示
スタート ストップ ソースコードは以下のようになった。 まずはHTML側。 スタートとストップボタンを表示。それぞれのボタンにonclickプロパティでstartTimer、stopTimer関数をセット。 canvasを囲うようにdivの...
スマホの画面サイズに合わせて、canvasサイズを設定する
スマホの画面サイズに合わせて、canvasのサイズを設定する HTML側は以下のようにする。canvasタグをdivタグ（id="wrapper"の）で囲っておく。 divタグはCSSで幅高さ100%にしておき、Canvasのサイズは最初の...
JavaScriptで、canvasに円弧や円を描くのと、角度（ラジアンの計算）
構文は以下のとおり。 arc(x, y, radius, startAngle, endAngle, anticlockwise) x,yが円の中心 radiusは半径 startAngleが開始角度。X軸方向が0度。 endAngleが終...
CSSをHTML本文に書く方法と外部ファイルから読み込む方法
CSSをHTML本文に書く方法は以下のとおり。headタグ内にstyleタグを記述。type="text/css"として、その中にCSSを記述すればよい。 CSSの記述が終われば、/styleタグで閉じること。 styleタグ内は、（昔対応...
JavaScriptのマウスのイベントmousedown、mousemove、mouseup
canvasにマウスでお絵描きするJavaScript。これを実現する。 マウスの現在座標をリアルタイムで取得して表示する ①addEventListenerメソッドでmousemoveを指定、第2引数で関数を入れる e.pageXYを使う...
JavaScriptでイベントonkeydown、onkeyup、onchange
キーボードのキーが押されたとのイベントonkeydown、onkeyup キーが押されたときにイベントが発生するのはwindow.onkeydownプロパティかdocument.onkeydownプロパティに関数を入れてあげればよい。 また...
JavaScriptで関数に関数を入れるコールバック関数の整理
JavaScriptの関数を関数に入れる不思議 JavaScriptでは、 ・関数を代入できる ・関数を関数の引数に渡すことができる というのがあって個人的にはすごく不思議な感じがする。 functionを使うことで関数に名前を付けずに（無...
JavaScriptで扱えるイベントとイベントハンドラーonload関連
ページ読込時のonloadイベントハンドラー onloadプロパティはそのページが読み込まれたとき（HTMLや画像のリソースの読み込み後）に発生するイベント。 HTMLのbodyタグやimgタグに、 としたりして指定できる。 順番的にはim...
JavaScript基礎学習その1備忘録的な
JavaScriptを基礎から学習中です。ここでは学び直しした内容を備忘録的に残しています。 JavaScriptはオブジェクトを定義できる 一般的にオブジェクトには「プロパティ」と「メソッド」がある 左側がプロパティ名で、：を挟んで右側が...
プログラミングあれこれ システム開発の「試験工程」UT・IT・STについて解説
久しぶりの投稿です。 元SE＆PLのキャリアがありながら、現在はブログを充実させるために色んなプログラミングスクールに通ったりしています。ｗ 色んなスクールに通ってレポすることで初心者やこれからスクール選びをする方の参考になればと思っていま...
プログラミングあれこれ プログラミングは独学可能か？コツと計画から進め方、難所の越え方のアドバイス
自分自身、大学の授業の傍らプログラミングを独学でやりつつ先輩の指導を受けながらプログラミングが出来るようになりました。また働き始めてから出会ったプログラマーの方、スクールの講師の方のお話なども含めて総合的に書いてみたいと思います。 エンジニ...
プログラミングあれこれ フリーランスエンジニアのデメリットとリスクを整理
エンジニア、プログラマーが独立したときに「こんなはずじゃなかった」とならないために、デメリットや、お金がかかるものについてつらつらと書いていこうと思います。 まだどんな記事になるかわかってないけど、実体験をもとに思い出しながら書きます。また...
スクールのインタビューや評判 GeekSalonを取材してわかった大学生限定プログラミングコミュニティの中や評判
今日は大学生限定のプログラミングコミュニティ「GeekSalon様」にインタビューをさせていただきました。 どんな風にプログラミングを学べるのか、どんな生徒が通っているのかお伺いしましたので、いま大学生でまさにプログラミングを学びたいと思っ...
プログラミングあれこれ Android StudioをWindows10にインストールしてプロジェクト生成、スマホで起動まで
Androidアプリを作ることに興味が湧いてきたのでAndroid Studioを使ってみました。 Androidアプリ制作初心者のために、また公式マニュアルでは先へ進めない方のために、備忘録として残しています。 自分も初めて触るしKotl...
プログラミングあれこれ Windows Subsystem for Linuxをインストールしてgcc入れてC言語でHello World
Windows Subsystem for LinuxというのをWindowsにインストールしてLinux環境を作る。 そのあとC言語のコンパイラであるgccをインストールして、Hello Worldを表示させるところまでをやりました。 L...
プログラミングあれこれ Linuxコマンド一覧25個💻備忘録＆初学者が学習しやすい順番で
私が最初にコンピュータを触ったのが20年前のUNIXでした。 そのころからコマンドには慣れ親しんだものですが、昨今はWindowsメインのため久しぶりにコマンドを触ってみました。 今日はLinuxコマンドで頻繁に使うものを詳しくお伝えしたい...