スタートページ＞
Javascript＞
ＣＡＮＶＡＳ
ＣＡＮＶＡＳの基本（２）図形描画の基本機能
canvasの概念およびピクセル情報に関しては、「ＣＡＮＶＡＳの基本（１）」で扱いましたが、実際の図形描画では、標準装備されている機能を使うことが必要です。ここでは、代表的な機能を列挙します。
基本図形
［実行］をクリックしてください。
この直後に、幅４００ピクセル、高さ２００ピクセルのCANVAS「canvas1」が定義されています。
<canvas id="canvas1" width="400" height="200"></canvas>
これらの図形を描画するJavascriptを以下に示します。
長方形の描画（黒い外枠）
- ソースリスト
function rect() {
var canvas = document.getElementById("canvas1"); ・・・Ａ
var ctx = canvas.getContext("2d"); ・・・Ｂ
ctx.rect(0, 0, 400, 200); ・・・Ｃ
ctx.strokeStyle = "black"; ・・・Ｄ
ctx.lineWidth = 1; ・・・Ｅ
ctx.stroke(); ・・・Ｆ
}
- ＡとＢは、body部で記述した<canvs～>とJavascriptを結び付ける機能です。「ＣＡＮＶＡＳの基本（１）」で示したので割愛します。以下の図形描画でのこの２行が必要ですが、割愛しています。
- ここでは、CANVASの外枠（長方形）を描画しています。
Ｃで長方形を定義し、Ｆで描画をします。
- Ｃの一般形：rect(x,y, w,h)
左上点 (x,y) と右下点 (x+w, y+h) を対角線とする長方形
(x,y)～(w,h) ではないことに注意
- Ｄは線の色、Ｅは線の太さ（ピクセル単位）です。
Ｄを指定しないと black、Ｅを指定しないと 1 になります。
これらの指定は、後続する図形描画にも引き継がれるので、その都度指定するほうが安全です。
- Ｆの stroke を個々の図形で与えずに、最後に記述して全体を一挙に描画することもできます。
直線の描画（赤い太線）
- ソースリスト
ctx.beginPath(); ・・・Ｇ
ctx.moveTo(50, 20); ・・・Ｈ
ctx.lineTo(200,80); ・・・Ｉ
ctx.closePath(); ・・・Ｊ
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.stroke();
- 線を引くときには、ＧとＪで囲みます。
- Ｈで起点、Ｉで終点を与えて直線を引きます。
多角形の描画（三角形）
- ソースリスト
ctx.beginPath();
ctx.moveTo(80, 50); ・・・Ｋ
ctx.lineTo(180,100); ・・・Ｌ
ctx.lineTo(130,120); ・・・Ｍ
ctx.closePath(); ・・・Ｎ
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
ctx.stroke();
ctx.fillStyle = "yellow"; ・・・Ｏ
ctx.fill(); ・・・Ｐ
- Ｋが起点となり、Ｌを終点とする直線が引かれますが、このときポインタはＬになっています。
それで、Ｍを与えると、ＬからＭへ直線が引かれます。
- このように、lineTo を並べることにより、多様な折れ線を引くことができます。
- 最後にＮで closePath とすると、最初の起点Ｋに直線が引かれ多角形になります。
ＭとＮとの間に ctx.lineTo(80,50); を加えればより明確になりますが、それを省略できるのです。
- ＯとＰで、多角形の内部に色をつけています。Ｐがないと色が表示できません。
円弧の描画（円）
- ソースリスト
ctx.beginPath();
ctx.arc(100, 150, 20, 0, 2*Math.PI, false); ・・・Ｑ
ctx.closePath();
ctx.strokeStyle = "purple";
ctx.lineWidth = 5;
ctx.stroke();
ctx.fillStyle = "lime";
ctx.fill();
- Ｑの一般形
arc(x,y, radius, startAngle, endAngle, anticlockwise)
- x,y：円の中心座標
- radius：円の半径（ピクセル）
- startAngle, endAngle：円弧の開始角度と終了角度
Ｘ軸（横軸）の正方向（右端）から「時計回り」にラジアンで与えます。
右端：0°= 0、 真下：90°= Math.PI/2、真上：-90°= -Math.PI/2
下半円：180°= Math.PI, 全円：360°= Math.PI*2
- anticlockwise：「時計回り」なら false、「反時計回り」なら true
true ならば、上のラジアンは正負が逆になります。
画像の表示
- ソースリスト（誤）
var img = new Image(); ・・・Ｒ
img.src = "canvas-image.jpeg"; ・・・Ｓ
ctx.drawImage(img, 250, 20); ・・・Ｔ
- ＲとＳで取り込む画像のＵＲＬを定義し、Ｔで表示位置を指定して表示します。
- Ｔの一般形
drawImage(img, x,y)
drawImage(img, x,y, w,h)
drawImage(img, ix,iy, iw,ih, x,y, w,h)
img：Ｒでの img をそのまま記述します。
x,y：表示位置（左上端）
w,h：表示での width と hight。元画像が拡大/縮小されて表示
ix,iy, iw,ih：元画像での表示する部分の範囲指定
でも、これでは「最初は画像が表示されず、もう一度クリックすると表示される」という状態になります。それは、上のＴでは、最初のクリック時点では、「画像が読み込まれないうちに表示させる」ことになるからです。再度クリックしたときは、以前のクリックで画像が読み込まれているので、表示できたのです。
このような「カッコ悪い」のを避けるために、次のように修正します。
- ソースリスト（正）
var img = new Image();
img.src = "canvas-image.jpeg?" + new Date().getTime(); ・・・Ｓ
img.onload = function() { ┐imgがonloadされたら、{ }の部分を実行
ctx.drawImage(img, 250, 20); │・・・Ｔ
} ┘
- ここのＴのimg.onloadは、「画像が読み込まれたら～」の意味です。すなわち、画像が読み込まれるまで待ってからdrawImageを行うのです。これにより、最初のクリックで画像が表示されるようになります。
- Ｓでの赤字部分の変更は、必須ではありませんが思わぬトラブルを避けるためのものです。
最初に画像がロードされた時であれば、Ｔのloadイベントが発生しますが、いったん画像がロードされるとキャッシュされ、それ以降はloadイベントが発生しなくなります。例えば、Canvasのページを表示した後、別のページに移動して、再度、Canvasのページに戻った場合、loadイベントが発生しないので、画像が表示されないことになります。
それを避けるための、画像ファイルにその時点の時刻をつけた（赤字）を追加した名称にして、キャッシュしてある画像ではなく、新しい画像だということにしてloadイベントを発生させるのです。
文字列の描画
- ソースリスト
ctx.strokeStyle = "black";
ctx.lineWidth = 1;
ctx.font = "10px 'ＭＳ 明朝'"; ・・・Ｕ
ctx.strokeText("☆(300,150)", 300, 140); ・・・Ｖ
ctx.textAlign = "center"; ・・・Ｗ
ctx.strokeText("(300,☆150)", 300, 160);
ctx.textAlign = "right"; ・・・Ｗ
ctx.strokeText("(300,150)☆", 300, 180);
- Ｖにより文字列が表示されます。
- 指定がなければ、文字列の左端の表示座標になります。
Ｗを指定することにより、中央あるいは右端の座標とすることができます。
ここでは☆の位置がそれにあたります。
- Ｕにより、文字のフォントを指定できます。
色指定について
ctx.strokeStyleやctx.fillStyleなどの色指定には、二つの形式があります。