その62。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「ラインスタイル(Line Style)の「ラインのマイター限界比率を設定してみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
マイターで接続部分が装飾されたものが描画されたと思います。
/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");
// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 幅を設定
canvas.lineWidth = 8;
canvas.lineJoin = "miter";
// デフォルト(10)
canvas.strokeLines(75, 200, 100, 150, 125, 200);
// 4
canvas.miterLimit = 4;
canvas.strokeLines(150, 200, 175, 150, 200, 200);
// 2
canvas.miterLimit = 2;
canvas.strokeLines(225, 200, 250, 150, 275, 200);
// 1
canvas.miterLimit = 1;
canvas.strokeLines(300, 200, 325, 150, 350, 200);
// ガイドラインを描画
canvas.lineWidth = 1;
canvas.strokeStyle = "rgba(255, 0, 0, 0.75)";
canvas.drawLine(50, 150, 375, 150);
};
今回勉強するのは19～32行目になります。
その61で勉強した「 miter 」の応用編です。
「 miter 」とは先端を尖らせる接続スタイルでしたね。
この尖らせる限界を決めるメソッドになります。
20行目
コメントでデフォルト(10)とある通リ、指示しなければ「 10 」が適用されます。
18行目で「 canvas.lineJoin = “miter“; 」と接続スタイルを指示していますので線を描画するだけで適用されます。
22～24行目
23行目で「 “miterLimit = 4” 」が指示されています。
接続する線の中心線が交わった地点を基準に「 4 」まで描画出来るようにしています。
あくまでマイターの限界値を設定していることに注意して下さい。
26～28行目
27行目で「 “miterLimit = 2” 」が指示されています。
「 2 」までの描画を許可するとも言えるかも知れませんね。
30～32行目
31行目で「“miterLimit = 1” 」が指示されています。
これは「 1 」までということですね
サンプルでは10と4、2と1の違いがわかりづらいですね。
jsdo.itで図表しようかと思ったのですが、いい感じに図表されたものがあったのでそちらをご参照ください。
ページ中央あたりに図解されています。
http://www.html5.jp/canvas/ref/property/miterLimit.html
