_Graphics.js

イメージ、シェイプ、文字列を描画する機能を提供するクラス _Graphics が定義されています。

init() 関数内で以下の設定を有効にすることで、機能を付加できます。

_USE_DRAWSTRINGEX | HTML5 Canvas テキストAPIをサポートしていない場合に <span> 要素を使用します。

コンストラクタ

| _Graphics

_Graphics()

_Graphics コンストラクタです。

メソッド

| canUseClip

canUseClip()

クリッピングをサポートしているかどうかチェックします。

戻り値：
クリッピングをサポートしている場合 true、サポートしていない場合 false

| canUseText

canUseText()

HTML5 Canvas テキストAPIをサポートしているかどうかチェックします。

戻り値：
HTML5 Canvas テキストAPIをサポートしている場合 true、サポートしていない場合 false

| getColorOfRGB

getColorOfRGB(r,g,b)

RGB値を指定してそのRGB値に対応するカラーを表す文字列を取得します。

パラメータ：

r | 赤要素の輝度を指定します（0〜255）。
g | 緑要素の輝度を指定します（0〜255）。
b | 青要素の輝度を指定します（0〜255）。

戻り値：
カラーを表す文字列を返します。

| setStrokeWidth

setStrokeWidth(width)

線幅を設定します。

パラメータ：

width | 線幅を指定します。

| setColor

setColor(color)

描画に使用する色を設定します。

パラメータ：

color | 描画に使用する色を指定します。

| setAlpha

setAlpha(a)

描画で参照されるα値を設定します。

パラメータ：

a | α値を指定します（0〜255）。

補足説明：
α値とは、255 で不透明、0 で完全な透明になる値です。

| setROP

setROP(mode)

ラスタオペレーションを設定します。

パラメータ：

mode | ラスタオペレーションを指定します。次のいずれかを指定します。
_ROP_COPY | 通常合成。
_ROP_ADD | 加算合成。

| setFont

setFont(size,family)

文字列描画に使用するフォントを設定します。

パラメータ：

size | フォントサイズ
family | フォントファミリー名

| stringWidth

stringWidth(str)

指定した文字列の幅を取得します。

パラメータ：

str | 文字列を指定します。

戻り値：
文字列を表示するのに必要な幅を返します。

補足説明：
本処理呼び出しの前に、setFont() メソッドでフォントを設定しておく必要があります。
DoJaでの Font クラスの stringWidth() メソッドに相当する機能です。

| fontHeight

fontHeight()

フォントの高さを取得します。

戻り値：
フォントの高さを返します。

補足説明：
DoJaでの Font クラスの getHeight() メソッドに相当する機能です。

| clearClip

clearClip()

現在設定されているクリッピング領域を解除します。

| setClip

setClip(x,y,width,height)

引数によって指定された矩形をクリッピング領域として設定します。

パラメータ：

x | 新しいクリッピング領域の左上のX座標を指定します。
y | 新しいクリッピング領域の左上のY座標を指定します。
width | 新しいクリッピング領域の幅を指定します。
height | 新しいクリッピング領域の高さを指定します。

| drawLine

drawLine(x1,y1,x2,y2)

直線を描画します。

パラメータ：

x1 | 直線の描画開始点のX座標を指定します。
y1 | 直線の描画開始点のY座標を指定します。
x2 | 直線の描画終了点のX座標を指定します。
y2 | 直線の描画終了点のY座標を指定します。

| drawRect

drawRect(x,y,width,height)

矩形を描画します。

パラメータ：

x | 矩形の左上のX座標を指定します。
y | 矩形の左上のY座標を指定します。
width | 矩形の幅を指定します。
height | 矩形の高さを指定します。

補足説明：
横方向には x 番目から x + width 番目のピクセル（width + 1 個）が描画され、縦方向には y 番目から y + height 番目のピクセル（height + 1 個）が描画されます。

| fillRect

fillRect(x,y,width,height)

矩形領域を塗りつぶします。

パラメータ：

x | 矩形の左上のX座標を指定します。
y | 矩形の左上のY座標を指定します。
width | 矩形の幅を指定します。
height | 矩形の高さを指定します。

補足説明：
横方向には x 番目から x + width - 1 番目のピクセル（width 個）が塗りつぶされ、縦方向には y 番目から y + height - 1 番目のピクセル（height 個）が塗りつぶされます。

| drawString

drawString(str,x,y)

文字列を描画します。

パラメータ：

str | 描画する文字列を指定します。
x | X座標を指定します。
y | Y座標を指定します。ベースラインの座標を指定します。

| setFlipMode

setFlipMode(flip)

イメージの描画時に反転または回転して描画を行うかどうかを設定します。

パラメータ：

flip | イメージの描画時の反転または回転方法を指定します。次のいずれかを指定します。
_FLIP_NONE | 反転しないことを表します。
_FLIP_HORIZONTAL | 横方向に鏡像反転することを表します。
_FLIP_VERTICAL | 縦方向に鏡像反転することを表します。
_FLIP_ROTATE | 縦横方向に鏡像反転（180度回転）することを表します。

| drawImage

drawImage(image,x,y)

イメージを描画します。

パラメータ：

image | <img> 要素または Image オブジェクト
x | X座標を指定します。
y | Y座標を指定します。

| drawScaledImage

drawScaledImage(image,dx,dy,width,height,sx,sy,swidth,sheight)

イメージを拡大・縮小して描画します。

パラメータ：

image | <img> 要素または Image オブジェクト
dx | 描画先の矩形の左上のX座標を指定します。
dy | 描画先の矩形の左上のY座標を指定します。
width | 描画先の矩形の幅を指定します。
height | 描画先の矩形の高さを指定します。
sx | 描画元の矩形の左上のX座標を指定します。
sy | 描画元の矩形の左上のY座標を指定します。
swidth | 描画元の矩形の幅を指定します。
sheight | 描画元の矩形の高さを指定します。

| drawTransImage

drawTransImage(image,dx,dy,sx,sy,width,height,cx,cy,r360,z128x,z128y)

イメージを回転・拡大・縮小して描画します。

パラメータ：

image | <img> 要素または Image オブジェクト
dx | 描画先のアンカーX座標を指定します。アンカー座標とは、回転・拡大・縮小の基準となる座標です。
dy | 描画先のアンカーY座標を指定します。アンカー座標とは、回転・拡大・縮小の基準となる座標です。
sx | 描画元の矩形の左上のX座標を指定します。
sy | 描画元の矩形の左上のY座標を指定します。
width | 描画元の矩形の幅を指定します。
height | 描画元の矩形の高さを指定します。
cx | 描画元の矩形の左からの相対X座標を指定します。この座標点とアンカー座標が一致するように描画されます。
cy | 描画元の矩形の上からの相対Y座標を指定します。この座標点とアンカー座標が一致するように描画されます。
r360 | 回転角度を指定します。時計回りで、単位は「度」です。
z128x | X方向の拡大率を指定します。128 で拡大率100%（等倍）です。
z128y | Y方向の拡大率を指定します。128 で拡大率100%（等倍）です。

補足説明：
本メソッドは setFlipMode() メソッドの設定を見ません。反転は、z128x および z128y の値をマイナス値にすることで行うことができます。