ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 タグ

<!-->
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML5 canvas.getContext("2d") リファレンス


コンテキスト

canvas 要素には、自分で描画する能力を持っていません。

canvas は、JavaScriptを使用してすべてのピクセルを制御できる矩形の領域です。

HTML5 は、canvas 要素に getContext("2d") オブジェクトの組み込みオブジェクトを持っています。

getContext("2d") オブジェクトは、線、ボックス、円、などを描画するメソッドを持っています。


色とスタイル

属性 説明
fillStyle color/style 描画の塗りつぶしの色。デフォルトは黒
strokeStyle color/style 描画のストロークの色。デフォルトは黒
lineWidth number 描画ストロークの幅。デフォルト は 1
lineCap butt
round
square
線の終端のスタイル。デフォルトは butt
lineJoin bevel
round
miter
線の角のスタイル。デフォルトは miter
miterLimit number 線の角のの限界サイズ。デフォルト 10
shadowColor color 影の色。デフォルトは黒
shadowOffsetX number 影の水平距離。デフォルトは 0
shadowOffsetY number 影の垂直距離で、デフォルトは 0
shadowBlur number ぼかし効果の大きさ。デフォルトは 0
メソッド 説明
createPattern(obj,pattern) fillStyle または strokeStyle 属性で使用される画像からパターンを作成する
createLinearGradient(x0,y0,z1,y1) gradient オブジェクトを作成する。 strokeStyle または fillStyle 属性の値としてこのオブジェクトを使用する
createRadialGradient(x0,y0,r0,x1,y1,r1) 円形の gradient オブジェクトを作成する。 strokeStyle または fillStyle 属性の値としてこのオブジェクトを使用する
addColorStop(position,color) 上記 gradient オブジェクトのメソッド。グラデーションの位置と色を指定する
drawCustomFocusRing(element)  
drawSystemFocusRing(element)  

パス、曲線、円、矩形

メソッド 説明
fillRect(x,y,w,h) fillStyle 属性の color/style を使用して塗し矩形を描画する
strokeRect(x,y,w,h) strokeStyle 属性の color/style を使用して矩形の線を描画する
clearRect(x,y,w,h) 矩形領域をクリアする。この領域内のすべてのピクセルが消去される
beginPath() 新しいパスを開始するか、または現在のパスをクリアする
moveTo(x,y) 線を作成せずに、指定されたポイントへパスを移動する
closePath() 終点から始点へパスの線(パス)を作成する。パスの完了
lineTo(x,y) 終点から、指定のポイントへ線を作成する
rect(x,y,w,h) 矩形を作成する
fill() 現在のパスを選択した色で塗りつぶす。デフォルトは黒
stroke() 指定の path メソッドで記述したストローク/パスを作成する
clip() キャンバスの唯一の可視エリアとなるエリアを作成する
quadraticCurveTo(cpx,cpy,x,y) パス内の現在位置から指定したパスへ2次ベジエ曲線を作成する
bezierCurveTo(cpx,cpy,cpx,cpy,x,y) パス内の現在位置から指定したパスへ3次ベジエ曲線を作成する
arc(x,y,r,sAngle,eAngle,aClockwise) 円、または円の一部を作成する。 Creates a circle, or parts of a circle
arcTo(x1,y1,x2,y2,radius) 2点間の円弧を作成する
isPointInPath(x,y) 指定の点がパスにある場合は true、それ以外は false であるブール値を返す

変形

メソッド 説明
scale(x,y) x および y パラメータに基づいて図面を伸縮する
rotate(angle) 指定の角度に基づいて図面を回転する
translate(x,y) 水平および垂直方向に図面を移動する
transform(a,b,c,d,e,f) 行列に基づいて図面の形状を変更する
setTransform(a,b,c,d,e,f) 現在の変形をクリアし、行列に基づいて図面の変更を行う

Text

属性 説明
font fontproperties キャンバスに書込むために使用されるフォントのプロパティを指定する
textAlign start
end
left
right
center
テキストの配置。デフォルトは "start"
textBaseline alphabetic
bottom
hanging
ideographic
middle
top
テキストの垂直方向の配置。デフォルトは "alphabetic"
メソッド 説明
fillText(text,x,y,maxWidth) キャンバスにテキストを描画し、fillStyle 属性で設定された色で塗りつぶす
strokeText(text,x,y,maxWidth) 塗りつぶしをしないで、strokeStyle 属性で設定された色を使用し、キャンバスへテキストを描画する
measureText(text).width 指定されたテキストの文字列を計測し、ピクセルで結果を返す

画像とピクセルの操作

属性 説明
width number imageData オブジェクトの幅を指定する
height number imageData オブジェクトの高さを指定する
data array imageData オブジェクト内のすべてのピクセルのRGBA値を含む配列
メソッド 説明
drawImage() キャンバスに描画するときに画像を使用する Use a picture when drawing onto the canvas
createImageData() 空白の imagedata オブジェクトを作成する
getImageData(x,y,w,h) キャンバスからのデータを含む、新しい imagedata オブジェクトを作成する
putImageData(imgdat,dx,dy,x,y,w,h) キャンバスに imagedata を描画する

合成

属性 説明
globalAlpha number 図面の透明度を指定する
globalCompositeOperation
source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
copy
xor
vendorName-operationName
図形や図面をキャンバスに配置する方法を指定する。デフォルトは source-over