ラベル html5 の投稿を表示しています。すべての投稿を表示

2014年4月2日水曜日

[html5]canvas上に画像を配置

context#drawImageを使用してcanvas上に画像を配置することができる。

以下のように３種類のdrawImageを用途によって使い分ける。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>canvasに画像を配置</title>
  <style>
    #mycanvas {
      outline: blue 1px solid;
    }
  </style>
</head>
<body>
<!-- canvas上に配置する予定の画像を非表示で用意する -->
<div style="display: none">
  <img src="hoge.png" alt="example" id="myimage" width="592" height="59"/>
</div>
<canvas id="mycanvas" width="800" height="350">
</canvas>
<script>
  !function () {
    var canvas = document.getElementById('mycanvas'),
        ctx;

    if (!canvas.getContext) {
      return;
    }

    ctx = canvas.getContext('2d');
    window.addEventListener('load', function() {
      var image = document.getElementById('myimage');
      // 左上のポジション指定
      ctx.drawImage(image, 10, 10);
      // ポジションと幅、高さ指定
      ctx.drawImage(image,
          10, 90,   // 左上のポジション
          102, 49); // 幅と高さ
      
      // 元画像の描画範囲（切り取り範囲）と幅と高さを指定
      ctx.drawImage(image,
          60, 30,   // 切り取り開始位置（左上の開始位置）
          25, 40,   // 切り取る幅と高さ
          10, 180,  // 画像を配置する左上のポジション
          25, 40);  // 画像の幅と高さ
    });
  }();
</script>
</body>
</html>

2014年3月21日金曜日

[html5]datalistタグ

datalistタグを使用すると、関連付けられたinputタグに入力候補をリスト表示することが出来る。
関連付けは、inputタグのlist属性とdatalistタグのid属性で行う。

テキストフィールドで使用した例

<input type="text" name="n" list="J1"/>
<datalist id="J1">
  <option value="ベガルタ仙台">
  <option value="鹿島アントラーズ">
  <option value="柏レイソル">
  <option value="浦和レッズ">
  <option value="大宮アルディージャ">
  <option value="FC東京">
  <option value="横浜Fマリノス">
  <option value="川崎フロンターレ">
  <option value="アルビレックス新潟">
  <option value="ヴァンフォーレ甲府">
  <option value="清水エスパルス">
  <option value="名古屋グランパス">
  <option value="セレッソ大阪">
  <option value="ガンバ大阪">
  <option value="ヴィッセル神戸">
  <option value="徳島ヴォルティス">
  <option value="サンフレッチェ広島">
  <option value="サガン鳥栖">
</datalist>

Chromeでの表示例

色選択で使用した例

<input type="color" name="color" list="c">
<datalist id="c">
  <option value="#000000">
  <option value="#ff0000">
  <option value="#00ff00">
  <option value="#0000ff">
  <option value="#ffffff">
</datalist>

Chromeでの表示例

2014年2月15日土曜日

html5の必須入力欄のスタイル定義

cssを使用してhtml5で追加された必須入力欄(required属性が設定されいる項目)のスタイルを定義する方法

例

required擬似クラスに対してスタイル定義をすることで、required属性が設定された入力欄のスタイルを変更出来る。

    input:required {
      background-color: lightcoral;
    }

[html5]日付・時間系の入力欄

日付

input type="date"で日付入力欄になる

例

<input type="date" >

出力例

時間

input type="time"で時間入力欄になる

例

<input type="time" >

出力例

年月

input type="month"で時間入力欄になる

例

<input type="month" >

出力例

2013年2月11日月曜日

play2でhtml5の数値テキスト

input type=numberな入力エリアは以下のコードで生成できる。

@helper.input(bookForm("count")) { (id, name, value, args) =>
  
}

inputNumberとかhelperにあってもよさそうなんだけど。

2013年2月3日日曜日

css3のinvalidとvalid

invalid、validを使用すると、入力要素の形式が無効か有効かによってスタイルを簡単に切り替えることができる。

例

// 入力要素が不正な場合は背景色を変える。
:invalid {
  background-color: #FFD4D4;
  border: 1px solid maroon;
}

// 入力要素が有効な場合は、スタイルを適用しない
:valid {
}

必須項目で値が入力されていない場合・・・

必須項目で値が入力されている場合・・・

2012年12月26日水曜日

html5の数値入力欄

inputタグのtype属性をnumberにすると数値入力欄になります。

例

<input type="number" name="number" id="number">

ブラウザで確認すると以下の様な入力フォームが出力されます。

数値入力欄の値をJavaScriptでNumberとして取得することもできます。Numberとして取得したい場合は、valueAsNumberプロパティを通して値を取得します。

例

  (function() {
    var number = document.getElementById('number'),
        value;
    value = number.valueAsNumber;
    console.log(typeof value);
  })();

2012年12月21日金曜日

html5のrequired属性の背景色を変更

html5のクライアントバリデーションの必須属性(required属性)の背景色をjqueryを使用して変更する方法。

  (function ($) {
    $('input:required').each(function() {
      var $this = $(this);
      // 初期表示時の色設定
      changeColor($this);

      // チェンジイベントをトリガーとする色設定
      $this.change(function() {
        changeColor($this);
      });

      function changeColor(element) {
        var backgroundColor;
        if (element.val()) {
          // 値がある場合は背景色を白に
          backgroundColor = 'white';
        } else {
          // 値がない場合は背景色をピンクに
          backgroundColor = 'pink';
        }
        element.css({backgroundColor: backgroundColor});
      }
    });
  })(jQuery);

登録: 投稿 (Atom)