ウェブサイト上にCanvasやsvgを使わず線を始点終点のx,y座標を指定して描く方法は？

ウェブサイト上にCanvasやsvgを使わず線を始点と終点のx,y座標を指定して描く方法はありますでしょうか？

例えば
<line x1=100 y1=100 x2=300 y2=300 >
のようにした場合は(100, 100)から(300, 300)までの斜めの線を描きたいと考えております。

cssのみであれば難しいならjQueryとかを追加するだけで可能になるのでしょうか？

できればCanvasとsvgを使わずに描きたいと考えております。

行動規範の内容に同意します

回答2件

ベストアンサー

Canvasやsvgを使わず (100, 100)から(300, 300)までという条件は、ひとまずこれで満たせます。

html
1<!DOCTYPE HTML>
2<html>
3<head>
4<style>
5#line {
6	position: absolute;
7	left: 100px;
8	top: 100px;
9	width: 200px;
10	height: 1px;
11	background-color: red;
12	transform-origin: left top;
13	transform: skewY(45deg);
14}
15</style>
16</head>
17<body>
18	<div id="line"></div>
19</body>
20</html>

ですので、こういった結果を生成するjavascriptを記述すればいいわけです。
つまりおおむねこんな感じです。

javascript
1var Line = function(x1,y1,x2,y2){
2	var len = Math.abs(x2 - x1);
3	var deg = 180/Math.PI*atan2(y2 - y1,len);
4	// lineクラスは、色や太さなどの初期値を設定済みという想定で
5	return $("div").addClass("line").css({
6		left : Math.min(x1,x2),
7		top : y1,
8		width : len,
9		transform : "skewY(" + deg + "deg)"
10	});
11};

ただ、こういった小手先の技術を使うより、素直にsvgを利用したほうが良いと思いますけどね。

投稿2017/07/30 21:08

zohnam

総合スコア1441

coffee_man

2017/07/31 08:43

回答ありがとうございます。そうですね。おっしゃるように素直にsvgを利用したほうが良いように思いました。

行動規範の内容に同意します

もう完了っぽいですがせっかく使ったので送っておくります。

使い方

コードすべてをテキストエディタにコピペ
ファイル名をindex.htmlにする
ダブルクリックで開くとブラウザが立ち上がる

(立ち上がらなければ直接ブラウザにドラッグアンドドロップしてください)

よみ出し方法などはコード内を参照ください。

javascript
1<!DOCTYPE html>
2<html>
3<head>
4<title>斜めに線をひく</title>
5<meta charset="utf-8">
6<style>
7	/*必須CSS*/
8	.box{ position: absolute;}
9	.line{ 
10		/*線の色を変えるならここで*/
11		background-color: #ccc; 
12		transform-origin:left top;
13	}
14</style>
15</head>
16<body>
17
18<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
19<script>
20
21	$(function()
22	{
23		//ここで呼んでいる 1本目のライン
24		var a = g.strokeLine({
25			startX : 100, //xの始点
26			startY : 100, //yの始点
27			endX : 200,	//xの始点
28			endY : 200,	//yの終点
29			strokeWeight : 2 //線の太さ
30		});
31		//消す時はこれを呼ぶ
32		//a.delete();
33
34		//ここで呼んでいる 2本目のライン
35		g.strokeLine({
36			startX : 300, //xの始点
37			startY : 100, //yの始点
38			endX : 400,	//xの始点
39			endY : 10,	//yの終点
40			strokeWeight : 2 //線の太さ
41		});
42	});
43
44
45
46	//以下プログラム本体 別ファイルに保存などして読み込んでください。
47	var g;
48	(function(g,$)
49	{
50		g.strokeLine = function(setting)
51		{
52			var el = {};
53			var init = function()
54			{
55				el.box = $('<div class="box"></div>');
56				el.line = $('<div class="line"></div>');
57
58				var boxWidth = setting.endX - setting.startX,
59					boxHeight = setting.endY - setting.startY;
60
61
62				el.box.css({
63					top : setting.startX,
64					left : setting.startY,
65					width : boxWidth,
66					height : boxHeight
67				});
68				
69				var rotate = Math.atan(boxHeight/boxWidth) * 180/ Math.PI,
70					diagonal = Math.hypot(boxWidth,boxHeight);
71				el.line.css({
72					width : diagonal,
73					height : setting.strokeWeight,
74					marginTop : (setting.strokeWeight / 2) * -1,
75					transform:'rotate(' + rotate + 'deg)'
76				});
77
78				start();
79			};
80
81			var start = function()
82			{
83				el.line.appendTo(el.box);
84				el.box.appendTo("body");
85			};
86
87			var _deleteLine = function()
88			{
89				el.box.remove();
90			};
91
92			init();
93
94			return { delete : _deleteLine }
95		};
96
97	}(g || (g = {}), jQuery));
98
99</script>
100
101
102</body>