[69-8] Canvasでテキストを描画しよう
[69-8] Canvasでテキストを描画しよう 最終更新日：2019年02月06日 （初回投稿日：2015年01月20日） 今回は、<canvas>要素に「テキスト（文字列）」を描画してみます。 過去記事の「[69-2] canvasに基本的な図形を描こう」で、円グラフの中に文字を入れていますね。今日はその文字の入れ方です。 本日のINDEX テキストは fillText() と strokeText() で指定します フォントスタイル、サイズ、書体、色、線の太さの指定 引数「maxWidth」で最大幅を指定する（省略可能） textAlignプロパティで、横方向（x）の表示位置を指定する textBaselineプロパティで、縦方向（y）の表示位置を指定する 描画した文字列の情報を測定する measureText() measureText() を使って、文字列にアンダーラインや背景ボ
![[69-8] Canvasでテキストを描画しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/58fe6181cc77ea81c600cf505fefe9be3d9eef63/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-49.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2F131205-3.gif)
はじめてのHTML5 第1回『HTML5の基本の書き方を覚える』 | HTML5でサイトをつくろう
第1回テーマ 第1回目のテーマは『HTML5の基本の書き方を覚える』とタイトルに書きましたが、ブログやサイトを作りはじめるには最初に必ず記述する文字がありますよね。 例えば、「DOCTYPE宣言」や「エンコーディング」などです。 HTML5の場合、これらの情報はどうなるのでしょうか？ 今までどうりの記述方法なのか、それとも大幅に変更されているのか。これを知らなければサイトを作りを始めることができないと思い、第1回目のテーマにしました。 では、具体的に今回のテーマ『HTML5の基本の書き方』とは、 HTML5でのDOCTYPE宣言の書き方 html要素と文字のエンコーディング HTML5がIEなど対応していないブラウザへ新要素への対応 HTML5に対応したリセットCSSの導入 です。 上記の条件をクリアして、サイト構築への準備を整えていきたいと思います。 HTML5でのDOCTYPE宣言の書
名前空間宣言は何ですか？ - WHATWG FAQ - 日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文：http://blog.whatwg.org/faq/ （2011 年 1 月 21 日版） 翻訳日：2011/01/25 最終更新日：2011/01/25 概要 WHATWGが公開しているHTML5のFAQです。HTML5の目的や存在意義といった大枠の話から、要素の記述方法といった細かい話まで、さまざまな方面
[45-4] meta要素の http-equiv属性で動作を指示しよう
[45-4] meta要素の http-equiv属性で動作を指示しよう 最終更新日：2017年12月08日 （初回投稿日：2012年10月18日） <meta>要素の「http-equiv属性」を使って、ブラウザの動作を指定できます。 必ず「content属性」と一緒に使います。 「http-equiv」の読み方は、「エイチティーティーピー イクイヴ」。 「http」は当然「hypertext transfer protocol」のこと。「equiv」は「equivalent」の略です。equivalent は「相当の・同義の」といった意味。 サーバ側の HTTPヘッダーでやるのと同じことができるって意味でしょうね。 使用する要素 <meta>要素は内容が多いため 記事を数回に分けています。 [45-1] meta要素で基本情報を指定しよう <meta>要素のルールと、属性のルール [4
![[45-4] meta要素の http-equiv属性で動作を指示しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/592027f3e8ef20097cc905941f6f4f240992b1ad/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例
JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例 佐川 夫美雄（Ashiras, inc.） フロント開発の現場では、Java中心の開発から、HTML、CSS、JavaScript中心の開発にかわりつつあります。今回は具体的な事例をもとに、実装アーキテクチャや開発インフラに、どのような変化が起きているかレポートします。 はじめに HTML5が2014年に正式勧告されることを受け、フロント業務アプリケーションに影響を与えています。より多くのことがHTMLやCSSでできるようになり、現場レベルでは開発スタイルそのものの見直しも行われています。実際、私が担当しているプロジェクトではJava中心の開発からHTML、CSS、JavaScript中心の開発へと開発環境を変えています。具体的に何をどのように変更しているのかを、私が担当しているプロジェクトの内容に沿ってご説明
HTML5 を利用したWeb アプリケーションのセキュリティ問題に関する調査報告書
HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている仕様であり、HTML5 およびその周辺技術の利用により、Web サイト閲覧者 (以下、ユーザ) のブラウザ内でのデータ格納、クライアントとサーバ間での双方向通信、位置情報の取得など、従来の HTML4 よりも柔軟かつ利便性の高い Web サイトの構築が可能となっています。利便性が向上する一方で、それらの新技術が攻撃者に悪用された際にユーザが受ける影響に関して、十分に検証や周知がされているとは言えず、セキュリティ対策がされないまま普及が進むことが危惧されています。 JPCERT/CCでは、HTML5 を利用した安全な Web アプリケーション開発のための技術書やガイドラインのベースとなる体系的な資料の提供を目的として、懸念されるセキュリティ問題を抽出した上で検討を加え、それらの問題
HTML5によるハイブリッドアプリ開発に関する雑記 - id:anatooのブログ
HTML5でiPhoneやAndroid向けのハイブリッドアプリを作るのが最近の流行りみたいです。ハイブリッドアプリとは、外面は普通のアプリとしてAppStoreやGoogle play marketでインストールできるものの、その中身や一部がHTML5で記述されているアプリです。 最近の有名な例だと、CookpadやLinkedIn、はてなスペース、少し前にネイティブに移行してしまいましたがfacebookのモバイルアプリもHTML5を使って記述されていました。GREE界隈で言われているらしいガワネイティブっていう言葉もハイブリッドアプリを指します。ちょっとググってみると、2016年には企業向けのアプリの50%がハイブリッドアプリになるという予測もあります。 ハイブリッドアプリの何がいいかというと、Objective-CとかJavaとかがわからなくてもウェブ系技術者であればAndroid
HTML5の基本を学べる、各要素のコメントでの解説が嬉しいシンプルなテンプレート -HTML5 Bones
ゼロからあなた自身のページを作る時のガイドとして利用されることを目的とし、最小限の要素で構成されたHTML5の基本に忠実に作成したテンプレートを紹介します。 HTML5 Bones HTML5 Bones -GitHub HTML5 Bonesの構成 HTML5 Bonesは非常にシンプルで、jQuery, Modernizeなどは含まれていません。含まれている外部のライブラリは、クロスブラウザ用にNormalize.css、IE8以下用にHTML5をレンダリングさせるためのhtml5shivだけです。 使用している要素もページを作成する最小限の要素で構成されており、テンプレートを利用するにあたり各要素をどのように使うべきか、インラインでコメントで細かく説明されています。 下記に、そのインラインコメントを翻訳しました。 年末年始をまたいで制作者のIanさんとやり取りをしていたので、公開に時
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 | HTML5でサイトをつくろう
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5＝難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。 xhtmlではブロックレベル要素とインライン要素という分類に分
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Standard 日本語訳
HTML5で廃止された要素｜HTML5｜PHP & JavaScript Room