コンピュータ JavaScriptで一定の間隔で角度の違う線を引く
昔どこかで見た線を引くサンプルプログラムをJavaScriptで再現してみます。こんな感じだったような気もしますが、中心部分の空白が無かったような気もします。ソースコード<!DOCTYPE html><html lang="ja"> <he...
javascript
コンピュータ コンピュータ ブラウザで動くJavaScript：DOM操作と開発環境構築
JavaScriptはたまにしか使わないので、コードを書くたびに基本から勉強しなおすことになりがちです。JavaScriptを学習したことを忘れてしまった未来の自分のために、記事として残しておきたいと思います。扱う内容として昔ながらのウェブ...
コンピュータ JavaScriptでHTMLの要素を挿入する
ソースコード:window.addEventListener('load', function () { let entory_form = document.getElementById('entory_form'); let p_1 =...
コンピュータ Windows11でscopeからnode.jsをインストールした話
パッケージ管理システムscoopを使ってnode.jsをインストールした記録です。名前で検索したところ複数ヒットPS F:\git\memoClone\memo> scoop search nodejsResults from local ...
コンピュータ JavaScriptで画像の差分を表示するプログラム
canvasの画像をピクセル単位でアクセスする方法を学びましたので、２つの画像の差分を表示するプログラムを作成してみました。以下のフォームは実際動作します。比較したい画像をドロップし「差分」ボタンを押すと結果の画像が表示されます。結果画像は...
コンピュータ JavaScriptでcanvasの画像をピクセル単位でアクセス。「青色で塗りつぶす」
canvas内の画像の全てのピクセルを青色にセットしてみます。実行例ソースコード<!DOCTYPE html><html lang="ja"> <head> <meta name="viewport" content="width=devi...
コンピュータ 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=dev...
コンピュータ 電子レンジの温め時間を足し算するページ
電子レンジで2つ同時に温める際の温め時間を計算します。1つ目分秒2つ目分秒
コンピュータ Javascriptで画像ファイルをドラッグアンドドロップでプレビュー表示
実際にJavaScriptで動くページになっています。 画像ファイルをドロップしてください説明以前にWebページでファイルをアップロードするフォームの作り方を調べたことがあり、その際ファイルをドラックアンドドロップ出来ることを知りました。そ...
コンピュータ Javascriptで作るWebページで動くアナログ時計
前回の秒針を動かすプログラムに分針と時針を追加してみました。$(function(){ var ele = document.getElementById("cv"); var ctx = ele.getContext("2d"); ctx...
コンピュータ JavaScriptで時計の秒針を表現する。その2
前回の記事ではrotate()でキャンバスごと回転していましたが、それだと分針や時針を描画する場合同時に回転してしまい都合が悪いです。各針ごとレイヤーとして重ね合わせれば良さそうです。その方法は、自分が当初考えていたプログラムと異なるので今...
コンピュータ JavaScriptで時計の秒針を表現する。
Javascriptでデジタル時計を作る方法を見つけたので、時計の絵を描いてあげればアナログ時計も作れるのでは？と思いアナログ時計の秒針をCansvasで描いてみました。$(function(){ var ele = document.ge...