コンピュータJavaScriptで画像の差分を表示するプログラム
canvasの画像をピクセル単位でアクセスする方法を学びましたので、２つの画像の差分を表示するプログラムを作成してみました。 以下のフォームは実際動作します。比較したい画像をドロップし「差分」ボタンを押すと結果の画像が表示されます。 結果画...
javascript
コンピュータ
コンピュータJavaScriptでcanvasの画像をピクセル単位でアクセス。「青色で塗りつぶす」
canvas内の画像の全てのピクセルを青色にセットしてみます。 実行例 ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta name="viewport" content="width=...
コンピュータJavaScriptでaddEventListenerを初めて使ったこと。
jQueryを使わない素のJavaScriptでイベントを登録する方法で.addEventListener()を使ってみました。 形式としてオブジェクト.addEventListener('イベント',function(e){});でオブジ...
コンピュータJavascriptで画像ファイルを表示しcanvasの幅と高さを取得
ドラックアンドロップでWebブラウザ上に画像を表示することができました。 こちらはHTMLのimgで画像を表示していますが、canvasで表示することが出来れば画像加工が出来そうなので試してみます。 実際動作するフォーム 画像ファイルをドロ...
コンピュータJavaScriptでボタンを押すと文字列が変更されるページ
ボタンを押すとこちらの文字列が変化します。 ソースコード: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=...
コンピュータ電子レンジの温め時間を足し算するページ
電子レンジで2つ同時に温める際の温め時間を計算します。 1つ目分秒 2つ目分秒
コンピュータJavascriptで画像ファイルをドラッグアンドドロップでプレビュー表示
実際にJavaScriptで動くページになっています。 画像ファイルをドロップしてください 説明 以前にWebページでファイルをアップロードするフォームの作り方を調べたことがあり、その際ファイルをドラックアンドドロップ出来ることを知りました...
コンピュータJavascriptで作るWebページで動くアナログ時計
前回の秒針を動かすプログラムに分針と時針を追加してみました。 $(function(){ var ele = document.getElementById("cv"); var ctx = ele.getContext("2d"); ct...
コンピュータJavaScriptで時計の秒針を表現する。その2
前回の記事ではrotate()でキャンバスごと回転していましたが、それだと分針や時針を描画する場合同時に回転してしまい都合が悪いです。各針ごとレイヤーとして重ね合わせれば良さそうです。その方法は、自分が当初考えていたプログラムと異なるので今...
コンピュータJavaScriptで時計の秒針を表現する。
Javascriptでデジタル時計を作る方法を見つけたので、時計の絵を描いてあげればアナログ時計も作れるのでは？と思いアナログ時計の秒針をCansvasで描いてみました。 $(function(){ var ele = document.g...
コンピュータJavaScriptで現在の時刻を表示する。
以前にJavaScrptで日時を取得する方法は調べてあるので、1秒ごとに時刻を更新するタイマー機能を組み込んでみました。 $(function(){ setInterval(function(){ var d = new Date(); v...
コンピュータ円マークをエスケープ又はスラッシュに変換するフォーム
変換前 変換後 EscapeSlashClear
コンピュータJavaScriptで文字列を16進数で表示するフォーム
TextEncoderで文字列をUint8Arrayに変換し16進数形式で表示します。 文字列: 実行 16進数: ページ内に埋め込んだJavaScriptで扱う文字列の文字コードは何だろう？と思い作成してみました。 適当な漢字を入力して試...
コンピュータ文字数をカウントするフォーム【JavaScript x ChatGPT】
ツイッターの投稿文字数(半角280文字)などの制限がある場合、文字数をカウントする必要があります。 テキストエディタなどによくある機能ですが、Windows10のメモ帳にはその機能が無さそうですのでJavaScriptで動くフォームを作成し...