大河内教授の憂鬱: Canvasで絵を書いてみる

さて、メモを操作するようなアプリを考えていて
初めはHTMLでゴリゴリと思っていたんですけど、
四角を書いてそれを線で結びたかったのでCanvasを使って絵を書こうと思いました。
JavaScript部分にはjQueryを使います。

まずはHTML上にCanvasを宣言します。

view plain print ?

<body id="body">
<canvas id="canvas"></canvas>
</body>


  <body id="body">
    <canvas id="canvas"></canvas>
  </body>

Canvasを一杯使いたいのでCanvasの要素を取得してきて
それをbodyタグと同じ大きさにします。

view plain print ?

var $cvm = $('#canvas');
var width = $(document.body).width();
var height = $(document.body).height();
$cvm.attr("width", width);
$cvm.attr("height", height);


  var $cvm = $('#canvas');
  var width = $(document.body).width();
  var height = $(document.body).height();
  $cvm.attr("width", width);
  $cvm.attr("height", height);

ウィンドウのサイズ変更されたら、、、って考えなきゃだめですね。
TODOにしとこう！

でキャンバスの基本設定

view plain print ?

var ctx = $cvm[0].getContext('2d');
ctx.lineWidth = 1;
ctx.globalAlpha = 0.7;
ctx.globalCompositeOperation = "source-over";


  var ctx = $cvm[0].getContext('2d');
  ctx.lineWidth = 1;
  ctx.globalAlpha = 0.7;
  ctx.globalCompositeOperation = "source-over";

getElementById() から取得してgetContext("2d")でもできるのですが
せっかくjQueryを使用しているのでjQueryのオブジェクトから取得。

lineWidthは線の太さ、globalAlhaは透明度ですね。
globalAlhaを設定した場合、globalCompositeOperationを設定します。

このglobalCompositeOperationってのは
ココが分かりやすいです。
文章よりサンプルがわかりやすいかも。

さて四角を書くのですが、それに対してテキストを入れてみます。

view plain print ?

ctx.font =textHeight + 'px "ヒラギノ角ゴ　Ｐｒｏ"';
// 表示するテキストの幅を取得する
var textWidth = ctx.measureText(item.text).width;
//Itemの幅を設定する
item.width = textWidth;
// テキストの背景を描画
ctx.fillStyle = "white";
ctx.fillRect(item.x, item.y, item.width,textHeight);
//テキストを描画
ctx.textBaseline = "bottom";
ctx.fillStyle = "black";
ctx.fillText(item.text, item.x, item.y + textHeight);


ctx.font =textHeight + 'px "ヒラギノ角ゴ　Ｐｒｏ"';
// 表示するテキストの幅を取得する
var textWidth = ctx.measureText(item.text).width;
//Itemの幅を設定する
item.width = textWidth;
// テキストの背景を描画
ctx.fillStyle = "white";
ctx.fillRect(item.x, item.y, item.width,textHeight);

//テキストを描画
ctx.textBaseline = "bottom";
ctx.fillStyle = "black";
ctx.fillText(item.text, item.x, item.y + textHeight);

まずContextのfontに対して文字列の大きさ(高さの数値で変数化してます)を設定しています。
その後、テキストの横幅を測っています。ContextのmeasureTextで測ってます。
item.widthというものに残していますがitemはテキストのオブジェクト(描画位置とか持ってる)を
再描画用に持っているので、それに残してるってだけです。(矩形描画時に使ってます)
色をfillStyleで設定してfillRect()で矩形を描画します。

その後、textBaselineでテキストの位置を設定してfillStyleで文字の色を設定して
fillText()で描画を行います。これで矩形内に文字列を埋め込みます。

で要素間を結合したいので、その座標に関して線を引きます。
今回は「ベジエ曲線」という線を使って要素を結合したいと思います。

view plain print ?

ctx.beginPath();
var point = new bezierPoint(preItem,item);
ctx.moveTo(point.x1,point.y1);
ctx.bezierCurveTo(point.x2,point.y1,point.x1,point.y2,point.x2,point.y2);
ctx.strokeStyle="#440000";
ctx.stroke();


 ctx.beginPath();
 var point = new bezierPoint(preItem,item);
 ctx.moveTo(point.x1,point.y1);
 ctx.bezierCurveTo(point.x2,point.y1,point.x1,point.y2,point.x2,point.y2);
 ctx.strokeStyle="#440000";
 ctx.stroke();

まずbeginPath()を呼びます。
これは線を描画する際に「さぁ始めるぞ！」っていう事を意味します。
その後、bezirePoint()を呼んでいますが、これは独自処理で線を引くための座標を算出しています。
それで取得してきたpoint(独自のオブジェクト)を元にmoveTo()によって開始点を設定します。
そこからbezierCurveTo()を利用して、終点を設定します。
６個引数がありますが、４つ目までは曲線の付加情報ですね。(もうちょっと凝る予定ですけど)
で５，６の引数が曲線の終点になります。
でstorokeStyleで色を決定し、stroke()で線を描画します。

これをやると

こんな感じになります。

ひとまず少し前に記述していたEvernoteの要素をそのまま出してみました！

大河内教授の憂鬱

2011年6月13日月曜日

Canvasで絵を書いてみる

0 件のコメント:

ブログアーカイブ