ファイル情報の取得－JavaScript入門（HTML5編）
HOME JavaScript入門[HTML5編] ファイル情報の取得 このページでは、読み込んだファイルのファイル名やサイズを取得する方法について見ていきます。 ファイル情報を読み込むサンプル ファイル情報のうちファイル名の取得方法は、最初のページで見ることができました。 サイズとファイル形式も同じようにして取得できます。 event.target.files[].name ファイル名を取得します。 event.target.files[].size ファイルサイズを取得します。単位はバイトです。 event.target.files[].type ファイルのMIMEタイプを取得します。 以下のサンプルでは、ファイル選択ボタンで選択したファイル（複数可）のファイル名・ファイルサイズ・ファイル形式を調べ、 divタグ内に書き出すようにしています。 ファイル情報を取得するサンプルスクリプト
ドロップ領域を目立たせる－JavaScript入門（HTML5編）
HOME JavaScript入門[HTML5編] ドロップ領域を目立たせる このページでは、ドロップ先を目立たせる方法について見ていきます。 どこにドロップすればいいか分かりにくい場合、 目立たせてあげると親切な場合があります。 ドロップ領域を目立たせるサンプルスクリプト ドロップ先を目立たせるには、 dragenterイベントでスタイルを変更してやります。 その後、dropイベントでスタイルを戻します。 またドラッグ要素がドロップエリアから外れた時のために、 dragleaveイベントでもスタイルを戻す処置を入れておきます。 以下のサンプルでは、下列の4分の1のエリアだけドロップできるようにしています。 上列の赤正方形がそのエリアに入った場合に、背景色をピンクに変えるようにしています。 ＜サンプル＞ このサンプルのスクリプトは以下の通りです。 <div id="dragarea"> <
描画面を回転させる-HTML5編
描画面を回転させる命令文 文字や画像を回転させる命令は以下のものです。 context.rotate(回転角度) 描画面を回転させます。回転角度はラジアンで指定。 前にも出てきたラジアンです。πが180°だったので、π/2が90°、 π/3が60°ということになります。 文字を回転させる では、以下のスクリプトで、文字を45°回転させてみましょう。 <canvas id="cv1" width="360" height="240"></canvas> <script> var ctx = document.getElementById("cv1").getContext("2d"); ctx.font = "normal 40px Arial"; ctx.textBaseline = "bottom"; ctx.fillStyle = "red"; ctx.fillText("JavaSc
画像を描画する-HTML5編
画像を描画する命令drawImage() まずcanvasに画像を描画するdrawImage()の使い方を３通り見ておきましょう。 context.drawImage(画像,X1,Y1) 画像を指定座標に描画する X1は画像を描画するX座標,Y1は描画するY座標 context.drawImage(画像,X1,Y1,W1,H1) 画像を指定した座標に、幅と高さも指定して描画する W1は画像を描画する際の幅、H1は描画する際の高さ context.drawImage(画像,X0,Y0,W0,H0,X1,Y1,W1,H1) 元画像の一部分を切り抜いてcanvasに描画する X0,Y0は切り抜く元画像の座標、W0,H0は切り抜く画像の幅と高さ 今回描画する元画像は649×433ピクセルの下のものです。この画像を3通りの方法でcanvasに描画していきます。 元画像を切り抜いてcanvasに描画す
セレクトボックスの操作－JavaScript入門
HOME JavaScript入門 セレクトボックスの操作 このページでは、セレクトボックスをJavaScriptで扱う方法について解説します。 現在選択されている項目を取得したり、 セレクトメニュー項目を設定する方法について見てみます。 セレクトボックスを扱うサンプルスクリプト では、以下のコードをHTMLのボディ内に記入してみてください。 フォーム部分はコピー＆ペーストでも構いませんが、 JavaScript部分は手書きでチャレンジしてもらえたら理解も深まると思います。 <form name="selbox"> <p>好きなプロ野球リーグは？</p> <select name="league" onchange="teamSet()"> <option value="">*リーグ選択</option> <option value="">セ・リーグ</option> <option va
canvasを画像に変換する-HTML5編
HOME JavaScript入門[HTML5編] canvasを画像に変換する ここでは、canvasに描いた図形や文字を、画像に変換する方法を見ていきます。 画像に変換すれば、右クリックで保存したり、他の画像と入換えしたりすることができるようになります。 canvasデータを画像に変換する canvasで描画したデータを画像に変換するには、toDataURL()を使います。 canvas.toDataURL(画像形式) キャンバス内のデータをdata:形式に変換します。 画像形式はimgage/png，image/jpeg，image/svg+xmlの何れかを指定します。 省略した場合はPNG形式になります。 toDataURL()の前は、contextではなくcanvasである点注意して下さい。 画像変換サンプル 以下のサンプルでは、canvasにラインを９列、ランダムな色で描いてい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
文字列を分割する－JavaScript入門
