JavaScript 【JavaScript】addEventListenerのコールバック関数に引数を渡す
はじめに
addEventListener()メソッド
target.addEventListener(type, listener );
target：イベントの対象となる要素
type：対象とするイベントの種類...
JavaScript
JavaScript 
JavaScript 【JavaScript】Canvasでカラーピッカーを使用して、線の色を簡単に変更する方法
はじめに
お絵かき機能を実装した際、線の色を簡単に切り替えれるようにしたかった。
実装
カラーピッカー
カラーピッカーはHTMLで表示できるinputのtype要素の一つです。
<input type=...
JavaScript 【JavaScript】Canvasで消しゴム機能を白色ではなく、透明にする方法
はじめに
canvas.toDataURLで画像を保存する際、png形式だと背景が透明になります。
消しゴム機能をstrokeStyleを白色で実装すると、保存する時に白線が残るため、消しゴム機能を透明にしたかった。
透...
JavaScript 【JavaScript】Promiseの使い方をまとめてみた。
はじめに
Promiseが登場する以前はコーバック地獄や非同期処理は実行順序を制御できない問題がありました。
Promiseはこれらの問題を解決するために考案されました。
Promiseとは
Promiseは非同期...
JavaScript [Ruby on Rilas]CarrierWaveを使用して、canvasの画像をBlobでDBに保存する
はじめに
<input type="file">で画像を送信・保存したときのCarrierWaveの動作(public/upload配下に画像を保存、カラムには画像名を保存)と同じような動作を、非同期でやりたかった。
こ...
JavaScript 【確かな力が身につくJavaScript「超」入門】を読んだので、まとめてみた
この本の目的
JavaScriptで書かれたプログラムを理解することができる。
既存のプログラムを少しアレンジし、新しいプログラムを作ることができる。
いざとなったら自分でゼロから書ける。
Chapter1 イントロダクション...
JavaScript 【JavaScript】Canvas要素をドラッグ＆ドロップで動かす【ゲーム】
1. こんな感じに実装する
青いボールをドラッグ&ドロップできます。
See the Pen
キャンバス by TKG1 (@tkg1)
on CodePen.
これは実際に要素をドラック&a...
JavaScript 【JavaScript】setTimeout()とsetInterval()を使用して、カウントダウンタイマー機能を実装する
setTimeout()・setInterval()とは
setTimeout()：ブラウザに対して指定した時間が経過した後に、ある関数を呼び出すよう指定する
setTimeout(()=> { 関数 }, ミリ秒単位)...