Canvas elementとは? わかりやすく解説

Weblio 辞書 > 辞書・百科事典 > 百科事典 > Canvas elementの意味・解説 

canvas要素

(Canvas element から転送)

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2024/06/28 21:07 UTC 版)

canvas要素(キャンバスようそ、: canvas element)とは、HTML5以降のHTMLの一部で、動的な2次元ビットマップ画像の描画のためのHTML要素

歴史

Mac OS X v10.4の内部でWebKitコンポーネントとして、DashboardウィジェットやSafariでのアプリケーションを強化するために、2004年[1]Appleが最初に導入した。後に、Mozilla FirefoxOperaでも採用され、WHATWGで、新しい標準規格として標準化された。

2009年の夏頃に、文字列描画のAPIとピクセル操作のAPIが追加になり、ウェブブラウザに実装された。

その後、HTML Canvas 2D Context, Level 2 が作られ、2012年12月17日[2]に最初の W3C Working Draft が発表になった。imageSmoothingEnabled により画像のスムージングを無効に出来たり、CanvasWindingRule が指定できるようになったり、破線が描画できるようになった。

利用法

canvas要素には、widthとheightという属性があり、HTML内での描画可能な領域となる。JavaScriptのコードにより、その領域内に他の一般的な2次元APIと似たAPIを通じて描画ができる。これにより、動的にグラフィックスを生成できる。期待されている利用法としては、ゲーム、アニメーション、グラフ作成、画像構築などを含む。

APIは状態管理、変形、合成、色とスタイル、ラインキャップと接合、影、長方形、パス、フォーカス管理、文字列、ピクセル操作、画像への変換などから構成されている。

以下のコードは、HTMLページにcanvas要素を作成する。

<canvas id="example" width="200" height="200">
HTML5のCanvas要素に対応していないブラウザでは、この文章が表示される。
</canvas>

JavaScriptを使うと、キャンバスの上に描画できる。

const example = document.querySelector('#example');
const context = example.getContext('2d');
context.fillStyle = "red";
context.fillRect(30, 30, 50, 50);

上記のコードはスクリーン上に赤い長方形を描画する。

実装

Internet Explorer 9Mozilla FirefoxGoogle ChromeSafariOperaNetFront など全ての主要ブラウザの最新版で実装されている。Internet Explorer 8やそれ以前ではネイティブ実装されていないが、それをサポートするための外部ライブラリがある。

古いInternet Explorer対応

反応

canvas要素の導入に当たり、Webの標準化コミュニティからは様々な反応があった。SVGをサポートする代わりに、新しい要素を導入するというAppleの決定に議論があった(現在は、canvas要素もSVGも両方対応している)。また、canvasがピクセル単位の描画のため、DOMのような対応するオブジェクトが存在しないことへの議論もあった。名前空間が存在しないことへの懸念もあった[3]

知的財産

2007年3月14日、WebKit の開発者の Dave Hyatt が Apple の Senior Patent Counsel の Helene Plotka Workman からのメールを転送した[4]。それには、Apple は WHATWG の 「Graphics: The bitmap canvas」というタイトルのついた、Web Applications 1.0 Working Draft, dated March 24, 2005, Section 10.1[5] に記載されている項目の知的財産を所有しているが、公式な特許ポリシーに基づき、標準団体に特許を譲渡する用意があると書かれている。これは、ウェブ開発者の間で議論を起こし、W3Cがロイヤリティーフリーの特許を明示的に好むのに対して、WHATWG がそのような特許ポリシーを持っていないことに対する疑問が生じた。後に、Appleは W3C のロイヤリティーフリーの特許条項に従う形で特許を開放した[6]。この開放は、canvas要素がHTMLワーキンググループにより作成された将来の W3C の勧告仕様の一部となっても、Apple はロイヤリティーフリーのライセンスを特許に対して提供する必要があることを意味する[7]

脚注

関連項目

外部リンク

仕様書

ウェブブラウザ側の解説


「Canvas element」の例文・使い方・用例・文例

Weblio日本語例文用例辞書はプログラムで機械的に例文を生成しているため、不適切な項目が含まれていることもあります。ご了承くださいませ。


英和和英テキスト翻訳>> Weblio翻訳
英語⇒日本語日本語⇒英語
  

辞書ショートカット

すべての辞書の索引

「Canvas element」の関連用語

Canvas elementのお隣キーワード
検索ランキング

   

英語⇒日本語
日本語⇒英語
   



Canvas elementのページの著作権
Weblio 辞書 情報提供元は 参加元一覧 にて確認できます。

   
ウィキペディアウィキペディア
All text is available under the terms of the GNU Free Documentation License.
この記事は、ウィキペディアのcanvas要素 (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。
Tanaka Corpusのコンテンツは、特に明示されている場合を除いて、次のライセンスに従います:
 Creative Commons Attribution (CC-BY) 2.0 France.
この対訳データはCreative Commons Attribution 3.0 Unportedでライセンスされています。
浜島書店 Catch a Wave
Copyright © 1995-2025 Hamajima Shoten, Publishers. All rights reserved.
株式会社ベネッセコーポレーション株式会社ベネッセコーポレーション
Copyright © Benesse Holdings, Inc. All rights reserved.
研究社研究社
Copyright (c) 1995-2025 Kenkyusha Co., Ltd. All rights reserved.
日本語WordNet日本語WordNet
日本語ワードネット1.1版 (C) 情報通信研究機構, 2009-2010 License All rights reserved.
WordNet 3.0 Copyright 2006 by Princeton University. All rights reserved. License
日外アソシエーツ株式会社日外アソシエーツ株式会社
Copyright (C) 1994- Nichigai Associates, Inc., All rights reserved.
「斎藤和英大辞典」斎藤秀三郎著、日外アソシエーツ辞書編集部編
EDRDGEDRDG
This page uses the JMdict dictionary files. These files are the property of the Electronic Dictionary Research and Development Group, and are used in conformance with the Group's licence.

©2025 GRAS Group, Inc.RSS