canvas
canvas要素 2.連続した直線
canvas要素はscriptによって画像が扱える要素です。
線の端の処理
HTMLは1.直線を引くと同じものを使用します。
window.onload=canvas_line;
function canvas_line() {
/* <canvas>要素のノードオブジェクトの取得 */
var canvas=document.getElementById('newcanvas');
/* 描画用のオブジェクトを取得する */
/* 未対応の場合処理終了 */
if(!canvas.getContext){
return false;
}
var cs=canvas.getContext('2d');
/* 直線を描く */
cs.beginPath(); // パスのリセット
cs.lineWidth = 20; // 線の太さ
cs.strokeStyle="#ff0000"; // 線の色
cs.moveTo(20,20); // 開始位置
cs.lineTo(190,20); // 次の位置
cs.stroke(); // 描画
/* 直線を描く 線の端の処理 1 */
cs.beginPath(); // パスのリセット
cs.lineCap="butt"; // 直線
cs.moveTo(20,70); // 開始位置
cs.lineTo(190,70); // 次の位置
cs.stroke(); // 描画
/* 直線を描く 線の端の処理 2 */
cs.beginPath(); // パスのリセット
cs.lineCap="round"; // 丸
cs.moveTo(20,120); // 開始位置
cs.lineTo(190,120); // 次の位置
cs.stroke(); // 描画
/* 直線を描く 線の端の処理 3 */
cs.beginPath(); // パスのリセット
cs.lineCap="square"; // 直線
cs.moveTo(20,170); // 開始位置
cs.lineTo(190,170); // 次の位置
cs.stroke(); // 描画
}
lineCapは線の端の形状を設定します。butt,round,squareのどれかの値が取れます。W3C参照- 設定されていないと初期値はbuttと同じです。ただし、上記の例で線の太さと、色は最初に設定した後に設定していなくてもそれ以降同じ太さと色で線が描画されるのと同じで設定されていないと直前の設定が生きてきます。
lineCap="round"は開始の座標から終了座標までの線の長さプラス端を丸くした長さになります。lineCap="square"はroundと同じ長さでまっすぐな終端となります。
コメントが日本語で入っていますのでjavaScriptファイルの文字コードはHTMLファイルと同じものにしておいてください。
線と線のつなぎ目の形状
window.onload=canvas_line;
function canvas_line() {
/* <canvas>要素のノードオブジェクトの取得 */
var canvas=document.getElementById('newcanvas');
/* 未対応の場合処理終了 */
if(!canvas.getContext){
return false;
}
/* 描画用のオブジェクトを取得する */
var cs=canvas.getContext('2d');
/* 直線を描く */
cs.beginPath(); // パスのリセット
cs.lineWidth = 30; // 線の太さ
cs.strokeStyle = "#ff0000"; // 線の色
cs.moveTo(40,10); // 開始位置
cs.lineTo(40,60); // 次の位置
cs.lineTo(90,60); // 次の位置
cs.stroke(); // 描画
/* 直線を描く 線の端の処理 1 */
cs.beginPath(); // パスのリセット
cs.lineJoin = "miter"; // マイター
cs.moveTo(130,10); // 開始位置
cs.lineTo(130,60); // 次の位置
cs.lineTo(180,60); // 次の位置
cs.stroke(); // 描画
/* 直線を描く 線の端の処理 2 */
cs.beginPath(); // パスのリセット
cs.lineJoin = "bevel"; // べベル
cs.moveTo(40,110); // 開始位置
cs.lineTo(40,160); // 次の位置
cs.lineTo(90,160); // 次の位置
cs.stroke(); // 描画
/* 直線を描く 線の端の処理 3 */
cs.beginPath(); // パスのリセット
cs.lineJoin = "round"; // ラウンド
cs.moveTo(130,110); // 開始位置
cs.lineTo(130,160); // 次の位置
cs.lineTo(180,160); // 次の位置
cs.stroke(); // 描画
}
lineTo(x, y)を続けて書くことでつながった線を描くことができます。lineJoinは線のつなぎ目の処理です。初期値はmiterです。bevel,round,miterの値が取れます。W3C参照- 上記サンプルの左上が指定なし。右上が処理1のmiterです。同じものになります。左下が処理2のbevel、右下がroundとなります。
マイター時の限界
window.onload=canvas_line;
function canvas_line() {
/* <canvas>要素のノードオブジェクトの取得 */
var canvas=document.getElementById('newcanvas');
/* 未対応の場合処理終了 */
if(!canvas.getContext){
return false;
}
/* 描画用のオブジェクトを取得する */
var cs=canvas.getContext('2d');
/* Ｖ字を描く */
cs.beginPath(); // パスのリセット
cs.lineWidth = 30; // 線の太さ
cs.strokeStyle = "#ff0000"; // 線の色
cs.moveTo(20,10); // 開始位置
cs.lineTo(50,200); // 次の位置
cs.lineTo(80,10); // 次の位置
cs.stroke(); // 描画
/* Ｖ字の上に本来の単独の直線を描く */
cs.beginPath(); // パスのリセット
cs.strokeStyle = "#000000"; // 線の色
cs.moveTo(20,10); // 開始位置
cs.lineTo(50,200); // 次の位置
cs.stroke(); // 描画
/* Ｖ字を描く */
cs.beginPath(); // パスのリセット
cs.strokeStyle = "#ff0000"; // 線の色
cs.miterLimit=1.0; // マイターリミットの設定
cs.moveTo(120,10); // 開始位置
cs.lineTo(150,200); // 次の位置
cs.lineTo(180,10); // 次の位置
cs.stroke(); // 描画
/* Ｖ字の上に本来の単独の直線を描く */
cs.beginPath(); // パスのリセット
cs.strokeStyle = "#000000"; // 線の色
cs.moveTo(120,10); // 開始位置
cs.lineTo(150,200); // 次の位置
cs.stroke(); // 描画
}
- miterで線をつなぐと角度が急になるほど結合部分が長くなっていきます。round,bevelは限界があります。miterとしてどこまでも鋭角にするかbevelとして扱うかを設定するのが
miterLimitです。初期値は10.0が設定されています。W3C参照 miterLimitは0より多い数値を設定します。設定値は、線の太さの半分を基準とした割合です。V字の鋭角の先端の設定値までにおさまるときは鋭角に伸ばします。設置値を超えるとbevelと同じに扱われます。設定値のところまで線がのばされるわけではありません。- サンプルの左は初期値でmiterLimitを設定していませんので線の太さの半分の10.0までにmiterが収まるので鋭角に描画されます。（黒で元の線を上書きしています。）
- 右はmiterLimit=1と設定しているのでbevelと同じになります。1の長さのところ（線の太さの半分）でmiterされるのではありません。