文字Line

作成：2026.02.17、編集：2026.02.17 ↑トップページ

JavaScriptで

文字で直線を描画する

画面に直線を引くスクリプトです。

文字を使って、位置計算して引いています。

描画エリアであるDIV要素のスタイルを「position:relative」にしておき、その中にスタイル「position:absolute」の文字のタグ要素を配置します。

描画エリアのスタイルに「overflow:hidden」を指定しておくと、クリッピング処理も可能となります。

スクリプトはHTMLのヘッダーで呼び出して組み込んでおき、あとの線を引くスクリプトを呼び出します。

操作：

●MojiLine(DocArea,100,100,'','','red',40,'●')

●MojiLine(DocArea,100,100,'','','black',5,'●')

●MojiLine(DocArea,0,0,100,100,'black',10,'●','')

●MojiLine(DocArea,100,100,0,0,'pink',5,'●','')

●MojiLine(DocArea,30,0,200,200,'#f00',20,'文字列','')

●MojiLine(DocArea,30,0,100,200,'#0008',20,'●',0.5)

●MojiLine(DocArea,30,0,150,200,'#0008',20,'●',1)

●MojiLine(DocArea,30,0,200,200,'#0008',20,'●',1.5)

●MojiLine(DocArea,30,0,250,200,'#0008',20,'●',2)

線を引く関数：MojiLine()：構文：

MojiLine(Area,X1,Y1,X2,Y2,Col,PS,Ch,Pt)

`Area`	描画エリアID（オブジェクト）
`X1`、`Y1`	描画開始位置X、Y（px。数値）
`X2`、`Y2`	描画終了位置X、Y（px。数値。省略時は点描画になります）
`Col`	描画色（CSSの指定色。文字列。省略時＝"#000"）
`PS`	描画点のサイズ（px。数値。省略時＝3）
`Ch`	描画文字列（文字列。省略時＝"●"）
`Pt`	描画ピッチ（数値。省略時＝0.6。1＝1em分）

Area

描画エリアID（オブジェクト）

X1、Y1

描画開始位置X、Y（px。数値）

X2、Y2

描画終了位置X、Y（px。数値。省略時は点描画になります）

Col

描画色（CSSの指定色。文字列。省略時＝"#000"）

PS

描画点のサイズ（px。数値。省略時＝3）

Ch

描画文字列（文字列。省略時＝"●"）

Pt

描画ピッチ（数値。省略時＝0.6。1＝1em分）

サンプルHTML

index.htm：

<!DOCTYPE HTML>
<HTML>
<HEAD>
<META http-equiv="content-language" content="ja">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<META http-equiv="Content-Script-Type" content="text/javascript">
<TITLE>文字Line</TITLE>
<STYLE>
#DocArea{	/* DIV */
	position:relative;
	background-color:#fff;
}
#DocArea SPAN{	/* SPAN */
	letter-spacing:0px;
}
</STYLE>
<SCRIPT src="c/Main.js"></SCRIPT>
</HEAD>

<BODY>
<DIV id=DocArea style="width:500px; height:300px; border:1px solid #000; overflow:hidden">
</DIV>
<SCRIPT>
MojiLine(DocArea, 100, 100, '','','#0ff',30,'●','');
</SCRIPT>
</BODY>
</HTML>

フォルダー「c」の中に「Main.js」を入れておきます。