※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
JavaScriptによるHTML5プログラミング入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
<input>－HTML5タグリファレンス
<input>タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。 ■フォーム部品の種類を指定するtype属性 type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"（一行テキストボックス）です。 ■type属性の値 type="hidden" 画面上は表示されない隠しデータを指定する type="text" 一行テキストボックスを作成する（初期値） type="search" 検索テキストの入力欄を作成する type="tel" 電話番号の入力欄を作成する type="url" URL
<h1>-<h6>－HTML5タグリファレンス
<h1>・<h2>・<h3>・<h4>・<h5>・<h6>タグは、見出しを付ける際に使用します。 数値が小さいほど高いランクの見出しとなります。 <h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。 同じ数値のものが複数ある場合には同じランクとなります。 ■使用例１ HTMLソース <h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6> ■見出しを配置すると暗黙的に新しいセクションを開始したことになる 見出しを配置すると暗黙的に新しいセクションを開始したことになります。 セクショニング・コンテンツの要素（ <article>・ <aside>・ <nav>・ <section> ）の中にある、 最初のヘッディング・コンテンツの要素（ <h1>・ <h2>・ <h3>
font プロパティ - Canvasリファレンス - HTML5.JP
構文 context . font [ = value ] 現在のフォント設定を返します。 値をセットしてフォントを変更することができます。その構文は、CSS の 'font' プロパティと同じです。CSS フォント値として構文解析できない値は無視されます。 関連キーワードと長さは、canvas 要素のフォントに対して算出されます。 仕様 font IDL 属性は、値がセットされると、CSSの 'font' プロパティと同じように解釈されなければいけません（ただし、'inherit'のようなプロパティ非依存のスタイルシート構文はサポートされません。）。その結果、フォントは、'normal' に強制された 'line-height' コンポーネントで、そして、CSS ピクセルに変換された 'font-size' コンポーネントで、そして、明示的な値に算出されているシステムフォントで、コンテキ
javascriptで文字列の描画幅を取得する方法 - Qiita
文字列の長さに応じてフォントサイズを縮小したり、省略表示したりできないかと思って調べてみました。 canvasのmeasureText()を使う方法と、DOMのoffsetWidthの値を使う方法があるようです。 canvasを使う方法 HTML5のcanvasを使いますので、canvas要素に非対応なIE8以前ではexcanvas.jsが必要です。 IEとexcanvasのバージョンの組み合わせ次第で動かない可能性もあります。 手順： (1)まずHTML中にcanvasを用意する <canvas id="canvas" width="0" height="0" style="visibility:hidden;position:absolute;"></canvas> Firefox9ではstyleでdisplay:none;としても大丈夫でしたが、IE+excanvasでは駄目だったの
描画面を移動させる-HTML5編
HOME JavaScript入門[HTML5編] 描画面を移動させる 前のページでは描画面を回転・変形させる方法を見てきました。 このページでは描画面を移動する方法について見ていきたいと思います。 描画面を回転させる時に、起点を移動させれば扱いやすくなります。 描画面を移動させる命令文 前のページではsetTransform()の最初の４つの引数を見てきましたが、 5番目と6番目の引数は描画面を移動させる時に指定します。 それと、もう一つ別の命令を見てみましょう。 context.setTransform(m11,m12,m21,m22,dx,dy) 第５引数，第６引数で指定した分だけ描画面を移動します。 context.translate(dx,dy) 指定しただけ描画面の起点（左上の点）を移動します。 この二つは同じ効果があります。 描画面の移動だけでなく変形も必要ならsetTran
save(), restore() メソッド - Canvasリファレンス - HTML5.JP
構文 context . save() 現在の状態をスタックの最後に加えます。 context . restore() スタックの最後の状態を抜き出し、その状態をコンテキストに復元します。 仕様 コンテキストは描画状態のスタックを維持します。描画状態は次の要素から構成されます： 現在の変換マトリックス 現在のクリップ領域 次の属性の現在の値： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline. 現在のパスと現在のビットマップは描画状態に含まれません。現在のパスは、b
さまざまな図形を描く - Canvas - HTML5.JP
Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 矩形（長方形） 先ほどのコーナーでは、線を引くことで矩形を描きましたが、一発で矩形を描くメソッドがあります。 ctx.fillRect(x, y, width, height) 塗りつぶした矩形を描きます。x, yには矩形の左上端の座標を、widthに矩形の横幅を、heightに縦幅を引数として与えます。 ctx.strokeRect(x, y, width, height) 矩形を描きますが、枠線のみとなります。引数はfillRectメソッドと同じです。 ctx.clearRect(x, y, width, height) 矩形を削除します。削除された部分は透明になります。引数はfillRectメソッドと同じでです。 それぞ
lineTo(x, y)－Canvasリファレンス
lineTo(x, y)メソッドは、直前の座標と指定座標を結ぶ直線を引く際に使用します。 指定する座標は、<canvas>要素の左上端からの距離となります。 すでに作成されているサブパスがある場合、lineTo()で作成される新しいサブパスは直前のサブパスに繋がる直線となります。 すでに作成されているサブパスは変更されず、点と直線からなる新しいサブパスがパス（サブパスの集合したもの）に追加接続されます。 サブパスとは、パスを構成する線の一本のことです。 パスの基本的な概念については、beginPath()のページを参照してください。 ■直線を描画する 新しい直線を描画する場合は以下のような流れとなります。 beginPath()で現在のパスをリセットする moveTo(x, y)でパスの開始座標を指定する lineTo(x, y)で座標を指定してラインを引く stroke()で現在のパスを
Canvasの使い方 - Canvas - HTML5.JP
このコーナーでは、Canvasを使うにあたっての事前準備と、簡単な使い方をまとめました。 ExplorerCanvasのダウンロード Internet ExplorerはCanvasに対応していません。そのため、Googleが提供しているExplorerCanvasというJavaScriptライブラリをダウンロードしましょう。0002 ExplorerCanvasダウンロード 2009/03/24現在、ExplorerCanvasの最新版は Release 3 です。excanvas_r3.zip をダウンロードし解凍すると、excanvas.jsというファイルがあります。実際に使うのは、このファイルのみです。このファイルを、Canvasを使うHTMLファイルと同じ場所に設置しておいてください。 HTMLの準備 Canvasを使うHTMLでは、excanvas.jsをロードするようscri
lineWidth = 線の幅－Canvasリファレンス
lineWidth属性は、線の幅を指定する際に使用します。 指定できるのは0より大きい有限の数値のみで、それ以外の値を指定しても無視されます。 座標空間の単位が適用されるため、特に単位を付ける必要はありません。 lineWidth属性を指定しない場合の初期値は1.0です。 ■引数（値）の説明 HTML + JavaScriptソース<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript"> <!-- function test() { //描画コンテキストの取得 var canvas = document.getElementById('sample'); if (canvas.getContext) { var contex
Canvasの使い方－Canvasリファレンス
■Canvasによる描画指定の一般的な手順 Canvasでは、HTMLとJavaScriptを組み合わせて描画内容を指定します。 Canvasによる描画は、大まかに以下のような流れとなります。 HTMLで、<canvas>要素の幅と高さ、および、id名を指定する getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する ■HTMLで、<canvas>要素の幅と高さ、および、id名を指定する HTMLソース <canvas id="sample" width="400" height="300"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> HTMLの側では、<canvas>要素で、描画領域の幅と
色を指定する - Canvas - HTML5.JP
ctx.strokeStyle = color 図形の枠線の色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 ctx.fillStyle = color 図形を塗りつぶす色を指定します。colorに指定する色はCSSで指定するフォーマットに対応しています。 それぞれのメソッドの具体的な使い方を見てみましょう。 onload = function() { draw(); }; function draw() { var canvas = document.getElementById('c1'); if ( ! canvas || ! canvas.getContext ) { return false; } var ctx = canvas.getContext('2d'); /* 円 #1 */ ctx.beginPath(); ctx.fillSt
直線・多角形を描く-HTML5編
HOME JavaScript入門[HTML5編] 直線・多角形を描く このページから、実際にCanvasに図を描いていきます。 まずは基本的な直線と、それを結び合わせた多角形の描き方を見ていきましょう。 2Dを描くためのスクリプト 前のページで、Internet Explorer対策の「excanvas.js」の読み込みと、 idの付いたcanvasタグを記述することを説明しました。 まずはそこまで完成させましょう。 ではこのcanvasに図形を描くためのソースを見てみましょう。 var cvs = document.getElementById("cv"); var ctx = cvs.getContext("2d"); document.getElementById()で、id名「cv」の付いたcanvas要素を取得し、変数cvsに代入しています。 次にそのcanvasに2D（平面）
Canvasで描画した画像を送信してサーバに保存する - Qiita
タイトルどおりのことをやった際の実装時メモ。 Canvasから画像を取得 2通りの方法が見つかった。 Base64への変換 Blobへの変換 Base64への変換 canvas.toDataURL()を呼び出すだけで取得可能であるが、 画像サイズに比例した巨大な文字列となり、変換によって元サイズより33%データ量が増える。 取得したBase64を<image>のsrcに指定すれば画像表示され、 <a>のhrefに指定すればリンククリックでダウンロードできてこれはこれで便利。 Blobへの変換 canvas.toBlob()を呼び出すだけで取得可能。 Blob形式で表現すれば、createObjectURL(blob)によりURL参照が取得できるので、 画像サイズに依存せずメモリ使用量を抑えられるらしい。（未確認) これは便利と思いきやcanvas.toBlob()はFirefoxでのみサポ
隠れたフォームのバリデーションに失敗 - Qiita
とある入力フォームを作った時の話ですが、送信ボタンを押しても一向に送信されず、原因をあれこれ探っていくと、Chromeのエラーコンソールに何やら出力されていました。 An invalid form control with name='foobar' is not focusable. そして、この問題になったフォームオブジェクトは<div style='display:none'>の中、つまりユーザーからは知覚も操作も不能な場所に置かれていて、そしてHTML5のバリデーション属性がかかっていました。 対策法 もちろん最初からこんなフォームを作ることはないとは思いますが、JavaScriptで制御しているとこのように「見えないコントロールがinvalidとなる」ということは発生してしまいます。対策法を検討してみる過程で、いろいろなものがありました。 novalidate、formnoval
HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」:phpspot開発日誌
PxLoader | A Simple JavasScript Preloader#sample1 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 時代はHTML5ですよ奥さん、と電車の中でも聞くようになった今日この頃ですが、HTML5ゲーム等で画像を大量に使う場合でもプレロードして読込状態等も取得できる機能を提供してくれるのがこのライブラリです。 画像に加えてサウンドの読込にも対応しています。 ローディング状態を表示するデモがサイト上で見れます メニュー、ゲーム、トータルといった感じで分割も出来ます。読込に時間がかかってもこういう進捗があれば落ち着きますね ブラウザが対応していないっていうのもあってPCだとまだまだFlashですが、スマホで使っちゃえるかもしれませんね 関連エントリ HTML5のcanvasを使ったアニメーションするタグクラ
ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」:phpspot開発日誌
Resumable.js: Fault Tolerant Resumable File Uploads in JavaScript - Badass JavaScript ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」。 HTML5のAPIを使ってこうしたことが実現できるようになるみたいです。 ファイルが大きくなり、回線も太くなりますがブラウザベースだと落ちちゃったらまたやり直しと回線も無駄ですし、何より時間のムダですね。 こういった機能が広まれば沢山の人の無駄を減らせそうです 動作ムービーは以下に。 何年後かには当たり前になっていてそんな時代があったの？ということになるかもしれませんね githubにてソースが公開されています 関連エントリ HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 HTML5のcan
<legend>－HTML5タグリファレンス
<legend>タグは、フォームの入力項目グループにキャプション（タイトルや説明）を付ける際に使用します。 <legend>を使用する場合には、<fieldset>～</fieldset>の中の先頭に配置します。 <legend>を<fieldset>～</fieldset>の中の先頭に配置すると、 親要素となる<fieldset>で定義されたフォーム部品グループのキャプションを表します。 ■HTML4.01からHTML5へのバージョンアップによる変更点 legend要素は、HTML4.01では揃え位置を指定するalign属性が非推奨とされながらも用意されていましたが、HTML5では廃止されています。 揃え位置を指定するにはCSSを使用してください。 ■使用例 HTMLソース <form action="mail.php" method="post"> <p><label>名前：<inpu
<ADDRESS>－HTMLタグリファレンス
<ADDRESS>タグはその文書に関する連絡先・問合せ先を表します。 タグの名前は<ADDRESS>ですが、住所に限らず、ホームページのリンク先・メールアドレス・住所・電話番号・FAX等 連絡をとるために必要な情報を配置することができます。 Internet ExplorerやNetscape Navigator等の一般的なブラウザでは、 <ADDRESS>～</ADDRESS>で囲んだ部分はイタリック体で表示されます。 ■使用例 HTMLソース <address> このホームページに関するお問合せは<br> HTMLクイックリファレンス<br> ホームページ：<a href="https://www.htmq.com/" >https://www.htmq.com/</a><br> Eメール：<a href="mailto:info@htmq.com">info@htmq.com</a>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
