JavaScript – ページ 3

SVGで長方形を描く

Scalable Vector Graphics（SVG）を用いて、「長方形」を描画するプログラムを作ります。そして、描いた「長方形」を移動させます。（注）SVG（Scalable Vector Grap

時間の経過が見えるタイマーを作りました。棒（バー）の長さが縮んでいくことで、時間経過を表現します。以前、記事「１分タイマーの作り方」で、１分のカウントダウンタイマーをプログラミングしました

高い解像度の写真を、サイトの背景画像にするプログラムを作りました。写真を自動でクリッピングすることで、写真を縮小することなくサイトの背景画像にします。（注）クリッピング：写真の一部を切り取ることこの部分はifram

ページを開けると、１分のカウントダウンが始まる、１分タイマーを作ります。下図は、１分タイマーのフローチャートです。とても簡単なフローチャートです。文章にすると、以下の手順となります。

ページ上にJavaScriptを用いて点を描画します。ここでも、やはり、Canvasを使用します。（注）Canvasの詳しい説明は、記事「Canvasに長方形を描く」をご参照ください。点の描画は、以下

前回記事「Canvasに長方形を描く」の続きです。ボタン操作で、Canvas上の長方形を描画し、また、消去します。前回のプログラム <!DOCTYPE html> <html> <hea

ページ上にJavascriptを用いて長方形を描画します。 Javascriptで長方形などの画像を描画する際、「canvas」を使用します。 canvasは、教室の黒板やスケッチブックに相当するもので、画像を描画する「

キーボードから文字を入力するのときに、楽しい効果音が鳴るプログラム（Javascript）を作りました。【音量注意】大まかな手順は、以下となります。効果音の素材作成 Audioオブジェクトの生成

ボタンをクリックすると、「ピッ」となるプログラムを作ります。効果音を探し、加工、プログラムへの組み込み、遅延のない再生と進みます。効果音を探す効果音の加工効果音をプログラムに組み込む効果音を遅延なく再生する（