JavaScript

スポンサーリンク
JavaScript

vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで

概要 Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。 検証環境 nodejs 11.10.0 npm 6.7.0 vue@cli 3.4.0 nodejsとnpmの導入については省略します。 vue@cl...
HTML

画像にモザイクをかける JavaScript canvas デモあり

概要 JavaScript + canvasでブラウザでアップロードした画像にモザイクをかけるデモを作成しました。 デモ画像 スライダーを動かし、モザイクの粒度を決めます。 例えば、10と選択した場合は 10ピクセル x 10ピクセル でモ...
JavaScript

JavaScript canvasで扇型を描画するサンプル

概要 canvasで扇型を描画するサンプルを紹介します。 解説 扇型はCanvas API の CanvasRenderingContext2D.arc()で描画することができます。 moveToメソッドで始点を与えることで扇型を描画す...
スポンサーリンク
HTML

回転ルーレットを作る JavaScript + canvas

概要 JavaScriptとcanvasで回転するルーレットを作りました。 Runボタンを押すと回転開始。stopボタンを押すと減速を始め、数秒後に停止します。 ライブラリとかは使っていません。 デモ まずはデモをみてください。 外...
JavaScript

JavaScriptによる画像処理と便利なライブラリ

概要 JavaScript + canvasによって行える様々な画像処理方法について紹介します。 Canvas APIについて HTML5には画像等の処理が行える強力なAPIである「Canvas」が備わっています。 これによりJavas...
文字列のAAを自動生成 デモ + サンプルコード JavaScript HTML

文字列のAAを自動生成 デモ + サンプルコード JavaScript

概要 文字列から文字列のAA(アスキーアート)を自動生成するデモを紹介します。 サンプル画像 普通のアルファベット平仮名漢字を変換してみました。 ↓実際の文字列↓ (端末・ブラウザなど、環境によっては正しく表示されません) ...
3次元の回転行列(オイラー角)で画像を回転させる (roll pitch yaw)【JS】 JavaScript

3次元の回転行列(オイラー角)で画像を回転させる (roll pitch yaw)【JS】

概要 JavaScriptを用いて、3次元の回転行列で画像を回転させるサンプルを紹介します。 3次元の回転行列 任意の軸周りの回転行列は次の式で表すことができます。 各軸周りの回転行列は以下の式で表します。 回転行列 フリー百科事...
HTML

全角かな or カナを半角カナに変換する【JS】

概要 全角かなもしくは全角カナを半角カナに変換するサンプルコードとデモを紹介します。 デモ 外部リンクで開く サンプルコード HTML <div> <div> <div> ...
HTML

canvas上のマウス座標を取得する。【JS】

概要 HTMLのcanvasの上でマウスを動かした時の座標の取得方法を紹介します。 考え方 canvas上のマウス座標 = window上のマウス座標 - canvasの左上の座標 という考え方で取得します。 サンプルコード 以下のよう...
深さ優先探索アルゴリズムを実装 部分和問題を解く JavaScript

深さ優先探索アルゴリズムを実装 部分和問題を解く

深さ優先探索について 深さ優先探索(depth-first search)は探索手法の一つです。 DFS、バックトラック法とも呼ばれます。 探索する木の1番目のノードから、「目的のノードに着く」もしくは「子のないノードに着く」まで、縦に伸び...
スポンサーリンク