最新のWeb開発のチュートリアル
 

HTML DOM Canvasオブジェクト


Canvasオブジェクト

Canvasオブジェクトは、HTML5で新しく追加されました。

HTML5 <canvas>タグは、JavaScriptで、その場で、グラフィックスを描画するために使用されます。

Canvasオブジェクトへのアクセス

あなたはアクセスすることができ<canvas>使用して要素をgetElementById()

var x = document.getElementById("myCanvas");
»それを自分で試してみてください

Canvasオブジェクトを作成します。

あなたは、作成することができ<canvas>使用して要素をdocument. createElement() document. createElement()メソッド:

var x = document.createElement("CANVAS");
»それを自分で試してみてください

注意: <canvas>要素は、それ自身の描画能力を(それはグラフィックスのための唯一のコンテナです)持っていない-あなたが実際にグラフィックスを描画するためにスクリプトを使用する必要があります。

getContext()メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。

この参考文献は、プロパティとメソッドカバーするgetContext("2d")キャンバス上-テキスト、線、ボックス、円、などを描画するために使用できるオブジェクトを、。


色、スタイル、および影

プロパティ 説明
fillStyle セットまたは図面を埋めるために使用される色、勾配、またはパターンを返します
strokeStyle セットまたはストロークのために使用される色、勾配、またはパターンを返します
shadowColor 設定または影に使用する色を返します。
shadowBlur 設定またはシャドウのぼかしレベルを返します。
shadowOffsetX 設定または形状から影の水平距離を返します
shadowOffsetY 設定または形状から影の垂直距離を返します
方法 説明
createLinearGradient() 直線勾配を作成する(to use on canvas content)
createPattern() 指定された方向に指定された要素を繰り返します
createRadialGradient() ラジアル/円形状のグラデーションを作成する(to use on canvas content)
addColorStop() 勾配オブジェクトの色や停止位置を指定します

ラインスタイル

プロパティ 説明
lineCap 設定またはラインのエンドキャップのスタイルを返します。
lineJoin 2行は満たして設定または作成されたコーナーの型を返し、
lineWidth 設定または現在の線幅を返します。
miterLimit 設定または最大マイター長さを返します

四角形

方法 説明
rect() 長方形を作成します。
fillRect() 描く"filled"矩形を
strokeRect() 四角形を描画(no fill)
clearRect() 所定の矩形内の指定されたピクセルをクリア

パス

方法 説明
fill() 現在の図面塗りつぶし(path)
stroke() 実際にあなたが定義したパスを描画します
beginPath() パスを開始し、または現在のパスをリセットします
moveTo() ラインを作成せず、キャンバス内の指定されたポイントへのパスを移動
closePath() 出発点に戻って、現在の点からパスを作成します
lineTo() 新しいポイントを追加し、キャンバスの最後の指定された点に、その点からラインを作成します
clip() クリップ元のキャンバスから任意の形状およびサイズの領域
quadraticCurveTo() 二次ベジェ曲線を作成します。
bezierCurveTo() 立方ベジエ曲線を作成します。
arc() アーク/曲線作成(used to create circles, or parts of circles)
arcTo() 2つの接線間のアーク/曲線を作成
isPointInPath() 指定された点は、電流経路にそうでない場合はfalseである場合にtrueを返します

変換

方法 説明
scale() 現在の図面が大きくなったり小さくスケール
rotate() 現在の図面を回転します
translate() リマップ(0,0)キャンバス上の位置を
transform() 図面の現在の変換行列を置き換え
setTransform() 現在は、単位行列に変換をリセットします。 次に実行されますtransform()

テキスト

プロパティ 説明
font 設定またはテキストコンテンツの現在のフォントプロパティを返します。
textAlign 設定またはテキストコンテンツの現在の配置を返します。
textBaseline 設定またはテキストを描画するときに使用される現在のテキストのベースラインを返します。
方法 説明
fillText() 描く"filled"キャンバス上のテキストを
strokeText() キャンバス上にテキストを描画します(no fill)
measureText() 指定されたテキストの幅を含むオブジェクトを返します。

イメージ図

方法 説明
drawImage() キャンバス上に画像、キャンバス、またはビデオを描画します

ピクセル操作

プロパティ 説明
width ImageDataオブジェクトの幅を返します。
height ImageDataオブジェクトの高さを返します。
data 指定されたのImageDataオブジェクトの画像データを含むオブジェクトを返します。
方法 説明
createImageData() 新しい、空白のImageDataオブジェクトを作成します。
getImageData() ImageDataをオブジェクトを返すことをキャンバス上のコピー指定された矩形のピクセルデータを
putImageData() 画像データを置く(from a specified ImageData object)キャンバス上にバック

コンポジット

プロパティ 説明
globalAlpha セットまたは図面の現在のアルファまたは透明度の値を返します
globalCompositeOperation 新しいイメージが既存の画像上に描画されるかを設定または返します

他の

方法 説明
save() 現在のコンテキストの状態を保存します
restore() 以前に保存したパスの状態と属性を返します。
createEvent()
getContext()
toDataURL()

標準プロパティおよびイベント

キャンバスオブジェクトは、標準サポートのプロパティイベントを


関連ページ

HTMLチュートリアル: HTML5キャンバス

HTMLリファレンス: HTML <canvas>タグ