Web►Front-End

[Front-End] 利用jsGraphics將網頁當畫布

前言

jsGraphics是一個可以讓你直接在網頁上繪圖的套件，HTML5的Canvas雖然也可以畫圖，但不知道能不能像jsGraphics跨區域，有空再研究看看。

jQuery

由於需要取得滑鼠座標，直接使用jQuery。

畫布

原本直接畫到document裡，但不知為何畫一個點就卡住了，最後還是給個區塊作畫，詳細原因有待研究。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div id="myCanvas" style="position:absolute;height:0px;width:0px;top:0px;left:0px;"></div>
<script type="text/javascript">
	var cnv = document.getElementById("myCanvas");
	var jg = new jsGraphics(cnv);
	jg.setStroke(3);
	var mousePress = false ;
	var nowMouseX , nowMouseY;
	var pastMouseX , pastMouseY ;
	$(document).mousemove(function (e) {
		pastMouseX = nowMouseX , paseMouseY = nowMouseY ;
		nowMouseX = e.pageX + document.documentElement.scrollTop;
		nowMouseY = e.pageY + document.documentElement.scrollLeft;
		if ( mousePress === true ){
			jg.drawLine(pastMouseX,paseMouseY,nowMouseX,nowMouseY);
			jg.paint();
		}
	});
	$(document).mousedown(function (e) {
		mousePress = true ;
	});
	$(document).mouseup(function (e) {
		mousePress = false ;
	});
	
</script>
</body>