From edcbfa42307307b620944e0aa4f6125d47e811eb Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 25 Jun 2021 01:34:02 +0900 Subject: Web/API/Canvas_API/Tutorial を更新 (conflicting と統合) (#1207) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - conflicting 版の方が原文に近かったので、こちらを正規版に置き換え - Tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d は内容が古く、他の記事でカバーされていると考えられるため削除 - 履歴とリダイレクトを修正 --- files/ja/web/api/canvas_api/tutorial/index.html | 86 +++++++++++-------------- 1 file changed, 36 insertions(+), 50 deletions(-) (limited to 'files/ja/web/api/canvas_api') diff --git a/files/ja/web/api/canvas_api/tutorial/index.html b/files/ja/web/api/canvas_api/tutorial/index.html index e9a02da072..020947f514 100644 --- a/files/ja/web/api/canvas_api/tutorial/index.html +++ b/files/ja/web/api/canvas_api/tutorial/index.html @@ -2,72 +2,58 @@ title: Canvas チュートリアル slug: Web/API/Canvas_API/Tutorial tags: - - Canvas tutorial + - Canvas + - Graphics + - Guide - HTML - HTML5 - - 'HTML:Canvas' - - Tutorials + - Intermediate + - Web translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Canvas-tutorial-broken --- -

<canvas> はスクリプト(一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な（またはあまり簡単ではない）アニメーションに使うことができます。右の画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

+
{{CanvasSidebar}}
-

<canvas> は Apple によって Mac OS X の Dashboard のために初めて導入され、後に Safari に実装されました。Firefox 1.5 のような Gecko 1.8 ベースのブラウザもこの新しい要素をサポートしてます。<canvas> 要素は HTML 5 としても知られる WhatWG Web applications 1.0 仕様の一部分です。

+
-

このチュートリアルでは、あなたの HTML ページに <canvas> 要素を導入する方法を説明します。提供された例は、<canvas> で出来ることの、いくつかの明確なアイデアを与え、それをあなた自身で実装できるようにするために使うことができます。

- -

始める前に

- -

<canvas> を使うことはとても難しいわけではありませんが、HTML と JavaScript の基本的な理解が必要です。

- -

上述のように、<canvas> 要素は全てのモダンブラウザでサポートされているわけではないため、例を見るには Firefox 1.5 か他の最近の Gecko ベースブラウザ、Opera 9、もしくは最近のバージョンの Safari が必要になるでしょう。

+
+

<canvas> 要素は、スクリプト (一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な (またはあまり簡単ではない) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

+
-

このチュートリアルの一覧

+

このチュートリアルでは、2D グラフィックを描画するために <canvas> 要素を使用する方法を、基礎から説明します。提供する例は、 canvas で出来ることの、いくつかの明確なアイデアと、それを自分自身のコンテンツで作成開始できるようなコードスニペットを提供します。

-
    -
  1. 基本的な使いかた
    2. -
  2. 図形を描く
    3. -
  3. 画像を使う
    4. -
  4. スタイルと色を適用する
    5. -
  5. 変形
    6. -
  6. 合成
    7. -
  7. 基本的なアニメーション
    8. -
  8. canvasの最適化
    9. -
+

Apple が OS X Dashboard のために WebKit に初めて導入した後、 <canvas> はブラウザーに実装されました。現在は、あらゆる主要ブラウザーが対応しています。

-

関連情報

+

始める前に

-
    -
  1. Canvas トピックのページ
    2. -
  2. canvas を使って図形を描く
    3. -
  3. Canvas の実例
    4. -
  4. canvas への文字の描画
    5. -
+

<canvas> を使うことはそれほど難しくはありませんが、HTML と JavaScript の基本的な理解が必要です。一部の古いブラウザーは <canvas> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas の既定のサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の height および width プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックをその場で生成します。

-

canvas に関する外部情報（日本語）

+

チュートリアル

-

canvas に関する外部情報（英語）

+

関連情報

-
-
-
{{Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage")}}
+

貢献者への注記

+ +

2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。

+ +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
-- cgit v1.2.3-54-g00ecf