さて前回作ったcanvasの雛形のjavascritp内に命令を書いてcanvas内に何かを描画していきましょう。
今回は基本の線を描きます。
線を描くには始点と終点を設定し、描画の命令を出します。この始点と終点の設定をパスといい、最初にbeginPath()でこのパスをリセットします。
始点はlineTo()メソッド、終点はlineTo()メソッドで入力します。
具体的には
moveTo(始点のx座標, 始点のy座標);
lineTo(終点のx座標, 終点のy座標);
と連続して記述します。
次に
x,y座標軸方向はcanvasの左上末端が原点となって以下の矢印の方向が正の向きとなります。
→x方向(width)
┌─────
↓ │
y │
方 │ canvas
向 │
function draw(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
ctx.beginPath();
//始点
ctx.moveTo(60, 0);
//終点
ctx.lineTo(60, 100);
ctx.stroke();
}
window.onlad = draw();
実行結果http://jsfiddle.net/sirok/Z8yCL/
直線ができましたね。
linTo()を連続して描画すると折れ線が表現できます。
function draw(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
ctx.beginPath();
//始点
ctx.moveTo(60, 0);
//終点
ctx.lineTo(60, 100);
ctx.lineTo(200, 100);
ctx.stroke();
}
window.onlad = draw();
実行結果http://jsfiddle.net/sirok/Z8yCL/1/
さらに、図形が一筆で閉じることができれば、そのパスを自動的に設定してくれるメソッドclosePath()があります。パスを設定するだけなので、これは必ずstrokeの前に置かなくてはなりません。
function draw(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
ctx.beginPath();
//始点
ctx.moveTo(60, 0);
//終点
ctx.lineTo(60, 100);
ctx.lineTo(200, 100);
ctx.closePath();
ctx.stroke();
}
window.onlad = draw();
実行結果http://jsfiddle.net/sirok/Z8yCL/3/
線の太さや色もつけることができます。
例えば赤色でフォントの厚みは15pxにして見ます。
線の色づけはstrokeStyleで設定します。'rgb(a,b,c)'か'red'などと直接色名を指定します。引数のa,b,cの使用ははcssの文字の色づけなどと同じで、赤rの濃度、緑gの濃度、青bの濃度を組み合わせて任意の色が作れます。デフォルトでは'rgb(255, 255, 255)'つまり、白です。
赤ならr =255だけなのでctx.strokeStyle = 'rgb(255, 0 ,0)';と書きます。
rgbで設定する場合、第4の引数を代入することができます。これはアルファといって色の濃度となり、0～1までの値が入ります。おそらく一定の区画に対象の色があって、そのうちのアルファの値は透明にすることで、濃度が表現されていると思われます。アルファを代入する場合はaを追加して'rgba()'とします。以下ではアルファを0.1とするとピンクに見えますね。透明は見えませんが、canvasの背景はデフォルトで白なので透明な部位は白く見えます。
太さはlineWidthで設定します。
ctx.lineWidth = 15;
function draw(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
ctx.strokeStyle = "rgba(255, 0, 0, 0.1)";
ctx.lineWidth = 15;
ctx.beginPath();
//始点
ctx.moveTo(60, 0);
//終点
ctx.lineTo(60, 100);
ctx.lineTo(200, 100);
ctx.closePath();
ctx.stroke();
}
window.onlad = draw();
実行結果http://jsfiddle.net/sirok/Z8yCL/13/
2014年5月7日水曜日
canvasの土台とよくあるエラー"Uncaught TypeError: Cannot call method 'getContext' of undefined"
canvasはhtmlのbody内にcanvasを描画する場所を作り、それからJavascriptで描画を命令します。
まずbody内の適当な位置に<canvas id ="canvas"><canvas>を置いてください。idは任意で構いませんが、ネット上にある作品を見てもcanvasを使われることが一般的です(特に作為的な意味はないです)
さて次に、JavascriptでcanvasをDOMで読み込みます。ここではdocument.getElementByIdを使いますので先ほど名づけたidを呼び込みます。
ここで注意点としてはjavascriptをhtml内に書き込む場合は必ず<script>を書き込む位置はcanvasタグの後にしてください。htmlは頭から読まれますから、document.getElementByIdをcanvasの前に置くとidを認識していないのでそれに対する操作ができず、エラーがでます。例えばChromeの開発ツールでは"Uncaught TypeError: Cannot call method 'getContext' of undefined"と出ます。確実にエラーをなくすために、window.onload = の後の関数内で呼び出すとなおよいです。
また、外部ファイルでも先にjavascriptが作動すると同じエラーが出ますので、bodyが読み込まれてからjavascript内のgetElementByIdを呼び出すように<body onload=init();>などとしましょう(当然init出なくとも適当に関数名を決められます。)
さて、canvasを読み込んだところでgetContext("2d")オブジェクトを適当な変数名(以下ではctx)で呼び出します。このオブジェクト内に、描画の命令を出すメソッドが詰まっていると考えていいです。
ここでは便宜上body内に書き込む方法で進めていきます。
<body>
<canvas id ="canvas"></canvas>
<script>
function init(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
}
window.onload = init();
</script>
</body>
canvas.widthはcanvasの水平方向(javascriptではx軸の向きと表現される)
canvas.heightはcanvasの鉛直方向(javascriptではy軸の向きと表現される)のサイズです。
皆さんの任意でサイズを決められます。
これでbody要素がcanvas内にできましたが、色がないので、何も変わったようには見えないかもしれません。そこでcanvasのあとに<p>a</p>を書き込んでチェックしましょう。やたらと下のほうにaが表示されますね。上にcanvasがあって、その部位を占めているということです。わかりにくければ以下のようにhtmlを書き込んでください。いずれ説明しますが、fillStyleは画面を塗りつぶす操作です。
function init(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
ctx.fillStyle = 'black';
ctx.rect(0, 0, 320, 320);
ctx.fill();
}
黒の画面が出ましたね。これがcanvasです。次回からcanvas内への描画をレクチャーしていきます。
まずbody内の適当な位置に<canvas id ="canvas"><canvas>を置いてください。idは任意で構いませんが、ネット上にある作品を見てもcanvasを使われることが一般的です(特に作為的な意味はないです)
さて次に、JavascriptでcanvasをDOMで読み込みます。ここではdocument.getElementByIdを使いますので先ほど名づけたidを呼び込みます。
ここで注意点としてはjavascriptをhtml内に書き込む場合は必ず<script>を書き込む位置はcanvasタグの後にしてください。htmlは頭から読まれますから、document.getElementByIdをcanvasの前に置くとidを認識していないのでそれに対する操作ができず、エラーがでます。例えばChromeの開発ツールでは"Uncaught TypeError: Cannot call method 'getContext' of undefined"と出ます。確実にエラーをなくすために、window.onload = の後の関数内で呼び出すとなおよいです。
また、外部ファイルでも先にjavascriptが作動すると同じエラーが出ますので、bodyが読み込まれてからjavascript内のgetElementByIdを呼び出すように<body onload=init();>などとしましょう(当然init出なくとも適当に関数名を決められます。)
さて、canvasを読み込んだところでgetContext("2d")オブジェクトを適当な変数名(以下ではctx)で呼び出します。このオブジェクト内に、描画の命令を出すメソッドが詰まっていると考えていいです。
つまりvar ctx = canvas.getContext("2d"); はvar date = new Date();のような紋切り型の宣言と同じように、あまりよく考えず形式的に書くだけでOKです。
<body>
<canvas id ="canvas"></canvas>
<script>
function init(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
}
window.onload = init();
</script>
</body>
canvas.widthはcanvasの水平方向(javascriptではx軸の向きと表現される)
canvas.heightはcanvasの鉛直方向(javascriptではy軸の向きと表現される)のサイズです。
皆さんの任意でサイズを決められます。
これでbody要素がcanvas内にできましたが、色がないので、何も変わったようには見えないかもしれません。そこでcanvasのあとに<p>a</p>を書き込んでチェックしましょう。やたらと下のほうにaが表示されますね。上にcanvasがあって、その部位を占めているということです。わかりにくければ以下のようにhtmlを書き込んでください。いずれ説明しますが、fillStyleは画面を塗りつぶす操作です。
function init(){
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = 320;
canvas.height = 320;
ctx.fillStyle = 'black';
ctx.rect(0, 0, 320, 320);
ctx.fill();
}
黒の画面が出ましたね。これがcanvasです。次回からcanvas内への描画をレクチャーしていきます。
登録:
投稿 (Atom)