苦学楽学塾 ホームページ
最終更新日：2025年1月5日
JavaScriptの図形描画関連について説明します。
HTMLでは、imageurlというURLに置かれている画像を表示する場合、<img>タグを用いて、
<img src="imageurl">
とすることにより、画像の表示を行います。これと同じことをImageオブジェクトを用いてJavaScriptで行うことができます。まず、Imageクラスのconstructorを用いて
img1 = new Image();
としてイメージ・オブジェクトimg1を作成し、img1のsrcプロパティに画像の位置を指定しておき、
img1.src = "imageurl";
さらに、img1を親bodyタグの子としてDOMツリーにつなげるべく、
document.body.appendChild(img1);
とすることにより、画像を表示することができます。このsrcプロパティには、後述しますが、キャンバス・オブジェクトcanvas1を用いて、アニメのキャラクタをスプライトとして画像生成し、以下のようにstyleプロパティのleft，topに、
img1.style.left = "227px";
img1.style.top = "179px";
と表示位置を設定、toDataURLメソッドを用いて、
img1.src = canvas1.toDataURL();
としてcanvas1のURLをimg1のsrcプロパティに設定し、キャンバス・オブジェクト内に描いたキャラクタを指定位置に表示できます。top，leftの値を変えて行けば、この画像を動かしつつ表示することもできます。以下、Imageオブジェクト、キャンバス・オブジェクトについて説明します。
Image要素のconstructor
new Image()
Image要素を生成します。
Image要素のプロパティ
ImageElement.alt
画像が読み込まれないときに表示する代替文字列を指定します。
ImageElement.src
画像が位置するURLを指定します。
ImageElement.width
画像を表示する幅を指定します。
ImageElement.height
画像を表示する高さを指定します。
キャンバス・オブジェクト
JavaScriptのキャンバス機能を使うと、画面に図形描画を行うことができます。正確に言うと、canvasはブラウザに組み込まれている機能で、JavaScriptはそれをキャンバス・オブジェクトとして利用可能にする働きをしています。
以下では、HTML記述の中に(width，heightの値はいくつでもよいです)
<canvas class="cv1" width="800" height="800">canvas機能がないブラウザでの代替文字列</canvas>
という部分があったとします。JavaScriptの記述の中で
canvas = querySelector(".cv1");
として、キャンバス要素を取得し、
ctx = canvas.getContext("2d");
として、2次元的描画コンテキストctxを取得したとする想定で説明をします。また、座標を指定して描画するときの座標ですが、HTML記述の中でキャンバス要素を配置する位置を座標(0, 0)として、画面右向きにpx単位でx座標、画面下向きにpx単位でy座標をとります。
キャンバス要素CanvasElementのメソッド
CanvasElement.getContext(type)
typeが"2d"の場合には2次元的描画コンテキストを返します。typeが"webgl"，"webgl2"，"webgpu"の場合は3次元的描画コンテキストを返します(どれを指定するかはブラウザによって異なります)。
CanvasElement.toDataURL(type)
現在canvasに表示されている画像を保存するURL(実際にはbase64形式と呼ばれる文字列)を生成します。typeには、"image/jpeg"または"image/png"を指定します(image/pngがデフォルト、ブラウザによって対応する形式が異なります)。以下のように、Image要素を作り、srcプロパティにcanvas1のURLを指定すると、別のcanvas2(コンテキストをctxとします)の中でcanvas1で作成された画像を表示することができます。
img1 = new Image();
img1.src = canvas1.toDataURL();
ctx.drawImage(img1, 50, 50);
キャンバス要素CanvasElementのプロパティ
Image要素と同様に、width，heightというプロパティがあります。
2次元的描画コンテキストctxのメソッドのうち代表的なものは以下の通りです。
clearRect
矩形領域を透明色で塗りつぶし描画されていた図形を消去します。
ctx.clearRect(x, y, width, height);
(x, y)を始点として、幅width，高さheightの矩形領域を消去します。
fillRect
矩形を描きます。矩形内を塗りつぶします。
ctx.fillText(x, y, width, height);
(x, y)を始点として、幅width，高さheightの矩形領域を、ctx.fillStyleプロパティで指定した方法(塗りつぶす色などを指定)で、塗りつぶします。
strokeRect
矩形枠を描きます。
ctx.strokeRect(x, y, width, height);
(x, y)を始点として、幅width，高さheightの矩形の枠を、ctx.strokeStyleプロパティで指定した方法(枠の色などを指定)、ctx.lineWidthで指定する線幅、ctx.lineJoinで指定する接合形状で表示します。
beginPath
新しいパスの作成を始めます。現状のパスは捨てられます。
ctx.beginPath();
この後に、パスを作っていきます。
moveTo
パスの起点を指定します。
ctx.moveTo(x, y);
(x, y)をパスの起点とします。
lineTo
現在のパスの位置から指定した点へのパスを作ります。
ctx.lineTo(x, y);
先にmoveToメソッドやlineToメソッドで指定されている点と(x, y)を結ぶパスを作ります。この時点で線が描画されるのではなく、stroke()メソッド，fill()メソッドで描画されます。
closePath
パスの先頭と末尾を結ぶパスを作り、閉じた図形となるパスを作ります。
ctx.closePath();
rect
矩形となるパスを作ります。
ctx.rect(x, y, width, height);
(x, y)を始点として、幅width，高さheightの矩形のパスを作ります。
arc
円、円弧となるパスを作ります。
ctx.arc(x, y, r, sangle, eangle, clockwise);
(x, y)を中心とする半径rの円弧を描きます。clockwiseは、開始点から時計回り(false)か、反時計回り(true)かを指定します。sangleは円弧の開始点、eangleは円弧の終了点を、ラジアン単位の動径の角度で指定します。円周率πをJavaScriptでは、Math.PIとして呼び出すことができます。円を描きたい場合は、sangleを0，eangleを2*Math.PIとします。パスの先頭ではない場合、パスの末尾と円弧の開始点を結ぶパスを作ります。
arcTo
パスの末尾と直線で接続される円弧を作ります。
ctx.arcTo(x1, y1, x2, y2, r);
パスの末尾と(x1, y1)を結ぶ直線のうち、パスの末尾と半径rの円Cとの接点Pまでのパスを作り、(x1, y1)と(x2, y2)を結ぶ直線のうち、半径rの円Cとの接点Qから(x2, y2)までのパスを作り、Pを開始点、Qを終了点とする半径rの円弧をパスに加えます。但し、指定内容によっては、円弧が作成されない場合があります。
fillText
文字列を線描画します。
ctx.fillText(string, x, y);
ctx.fillStyleで指定する色、ctx.fontで指定する文字フォント、ctx.textAlignとctx.textBaseLineで指定される文字配置に従って、文字列stringを表示します。
strokeText
文字列を中抜き表示します。
ctx,strokeText(string, x, y);
ctx.strokeStyleで指定する色、ctx.fontで指定する文字フォント、ctx.textAlignとctx.textBaseLineで指定される文字配置に従って、文字列stringを中抜きで表示します。
fill
現在のパスの終点と始点を結び、ctx.fillStyleで指定した方法(塗りつぶす色などを指定)、塗りつぶします。
ctx.fill();
stroke
現在のパスの終点と始点を結び、ctx.strokeStyleで指定した方法(枠の色などを指定)で、ctx.lineWidthで指定する線幅、ctx.lineJoinで指定する接合形状で、線を表示します。
ctx.stroke();
drawImage
imageで指定される画像を、指定位置に表示します。
ctx.drawImage(image, x, y);
imageには、Imageインスタンスを指定します。imageオブジェクトのsrcプロパティで、外部で作成された画像、別のcanvasで作成された画像を設定可能です。
quadraticCurveTo
現在のパスの終点と指定点を結ぶ曲線のパスを作成します
ctx.quadraticCurveTo(cpx, cpy, x, y);
パスの末尾と(cpx, cpy)を結ぶ直線と、(cpx, cpy)と(x, y)を結ぶ直線の2直線を接線とする曲線のパスを作ります。
clip
現在のパスでキャンバス画面を切り取り、その中で後続の図形を表示させます。このメソッドについては、「非ゼロ回転数ルール」という切り抜きルールが適用される、とのことで、ネット検索してみてください。
scale
図形を伸縮します。
ctx.scale(xe, ye);
scale関数実行後の図形描画は、x方向にxe倍、y方向にye倍して拡大表示されます。負数を指定すると反転されます。
rotate
図形を回転させます。
ctx.rotate(angle);
rotate関数実行後の図形描画は、(0, 0)を中心に時計回りにangleラジアン回転させて表示します。変換原点を変えるためには、translateメソッドを使います。
translate
図形描画の原点を移動します。
ctx.taranlate(xd, yd);
translate関数実行後の図形描画は、原点が(0, 0)から(xd, yd)に移動したかのように行われます。つまり、座標(x, y)を指定すると、(x+xd, y+yd)を指定したかのように表示が行われます。
createImageData
ImageDataオブジェクトを生成します。
ctx.createImageData(width, height);
幅width，高さheightのImageDataオブジェクトを生成し、ImageDataオブジェクトを返します。width*heightピクセルから成るImageDataオブジェクトは配列構造を持っており、そのlength(ImageData.data.lengthとして取得できます)は、width*height*4です(lengthバイトのデータを持っています)。つまり1ピクセルについて4バイトのデータを持っており配列をImageData.data[n]として、nが4で割り切れる数のとき赤(R)、nが4で割って1余るとき緑(G)、nが4で割って2余るとき青(B)、4で割って3余るとき透明度(大きくなるほど不透明)を表します。ビットマップ方式で画像を描きたい場合に使います。putImageDataメソッドの実行により画面に表示されます。
getImageData
キャンバスから画像データを取得します。
ctx.getImageData(x, y, width, height);
キャンバスに描画されている画像のうち、(x, y)を始点とし、幅width，高さheightの矩形領域を抜き出してImageDataオブジェクトを生成します。
putImageData
ImageDataオブジェクトのデータをキャンバスに描画します。
ctx.putImageData(imagedata, x, y);
ImageDataオブジェクトimagedataをキャンバスに、(x, y)を始点として描画します。
save
現状の描画状況をスタックに退避します。
ctx.save();
一時的にキャンバスの状況を変更したいが、現状もまだ使う、というときに、一時的に、パス、線色、塗りつぶし色、線幅、などの状況をsaveメソッドでスタックに退避し、あとでrestoreメソッドにより復帰させることができます。
restore
スタックに退避されているキャンバスの状況を復活させます。
ctx.restore()
2次元的描画コンテキストctxのプロパティには以下のものがあります。
ctx.strokeStyle
輪郭線の色を取得、設定します。色を指定する場合は、ctx.strokeStyle = "#8f74b3";のようにRGBの値を16進数で指定するか、ctx.strokeStyle = "rgba(125, 79, 202, 127)";(赤緑青の濃度、透明度)，あるいは標準色を表す文字列でctx.strokeStyle = "palegreen";のように指定します。
ctx.fillStyle
strokestyleプロパティと同様にして、図形の内側を塗りつぶす色を取得、設定します。createLinearGradient()メソッド，createConicGradient()メソッド利用によるグラデーション、createPattern()メソッド利用によるパターンの設定も行えます。色指定は、strokeStyleの設定と同様です。
ctx.lineWidth
線幅をpx単位で指定します。太線は中心線から広がるように描画されます。
ctx.lineCap
線の端点形状を取得、設定します。"butt"(端点で切り取られた形状になります)，"round"(丸みを帯びた形状です)，"square"(端点を中心とし、線幅を1辺の長さとする四角形になります)の3通りが設定可能です。
ctx.lineJoin
線の折れ曲がり形状を取得、設定します。"bevel"(角が切り取られた形状)，"round"(丸みを帯びた形状)，"miter"(角が尖った形状)の3通りが可能です。
ctx.miterLimit
ctx.lineJoinが"miter"であるとき、角があまりに鋭いと尖った部分が長くなりすぎるので、折れ曲がりの内側と尖った部分の先端の距離の限界値を数値で設定します。限界値を超える場合、"bevel"のような形状になります。
ctx.font
文字列を表示するときのフォント属性を取得、設定します。CSSのフォントのスタイル記述で指定するfont-style，font-family，font-size，font-weightを空白で区切った文字列として指定します。デフォルトは、"10px sans-serif"です。イタリック太文字のArialフォントで24pxサイズで表示する場合、
ctx.font = "italic bold Arial 24px";
と設定します。文字色は、fillStyleプロパティ、strokeStyleプロパティで設定します。文字の描画は、fillTextメソッド、strokeTextメソッドで行います。
ctx.textAlign
横方向の文字配置を取得、設定します。"left"(左詰め)、"center"(中央揃え)、"right"(右詰め)の3通りが可能です。
ctx.textBaseline
縦方向の文字配置を取得、設定します。"top"(上端に揃えます)，"middle"(中央に揃えます)，"bottom"(底辺に揃えます)，"alphabetic"(アルファベット表示で揃えます)，ideographic(漢字文化圏ではこれを使います)が指定可能です。デフォルトは、"alphabetic"です。
ctx.shadowColor
影の色をrgba(赤緑青の濃度、透明度)で指定します。
ctx.globalAlpha
描画する図形の透明度を0 (透明)～1.0 (不透明)の数値で、取得、設定します。
【広告】 ここから広告です。ご覧の皆さまのご支援ご理解を賜りたく、よろしくお願いいたします。
【広告】 広告はここまでです。