Update index.html

マウスと指で線が引けるようにする
cardcapt · Feb 8, 2020 · be7a650 · be7a650
1 parent 8912bac
commit be7a650
Showing 1 changed file with 77 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -1,23 +1,87 @@
 <!DOCTYPE html>
-<html>
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-<meta charset="utf-8" />
+<meta charset="utf-8">
 <title>お絵かきできるSNS</title>
-<meta name="description" content="テスト" />
-<meta name="keywords" content="テスト" />
-<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 </head>
 <body>
 <canvas id="canvas" width="200" height="200"></canvas>
 <script>
-can=document.getElementById("canvas");
-ct=can.getContext("2d");
-ct.beginPath();
-ct.moveTo(0,100);
-ct.lineTo(200,100);
-ct.lineTo(100,0);
-ct.lineTo(0,100);
-ct.stroke();
+var ox=0,oy=0,x=0,y=0;
+var mf=false;
+var ct;
+
+//初期設定
+function mam_draw_init(){
+	var can;
+	can=document.getElementById("canvas");
+	can.addEventListener("touchstart",onDown,false);
+	can.addEventListener("touchmove",onMove,false);
+	can.addEventListener("touchend",onUp,false);
+	can.addEventListener("mousedown",onMouseDown,false);
+	can.addEventListener("mousemove",onMouseMove,false);
+	can.addEventListener("mouseup",onMouseUp,false);
+	ct=can.getContext("2d");
+}
+
+function onDown(event){
+	mf=true;
+	ox=event.touches[0].pageX-event.target.getBoundingClientRect().left-scx();
+	oy=event.touches[0].pageY-event.target.getBoundingClientRect().top -scy();
+	event.stopPropagation();
+}
+
+function onMouseDown(event){
+	mf=true;
+	ox=event.clientX-event.target.getBoundingClientRect().left;
+	oy=event.clientY-event.target.getBoundingClientRect().top ;
+}
+
+function onMove(event){
+	if(mf){
+		x=event.touches[0].pageX-event.target.getBoundingClientRect().left-scx();
+		y=event.touches[0].pageY-event.target.getBoundingClientRect().top -scy();
+		drawLine();
+		ox=x;
+		oy=y;
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+
+function onMouseMove(event){
+	if(mf){
+		x=event.clientX-event.target.getBoundingClientRect().left;
+		y=event.clientY-event.target.getBoundingClientRect().top;
+		drawLine();
+		ox=x;
+		oy=y;
+	}
+}
+
+function onUp(event){
+	mf=false;
+	event.stopPropagation();
+}
+
+function onMouseUp(event){
+	mf=false;
+}
+
+function drawLine(){
+	ct.strokeStyle="#000000";
+	ct.lineWidth=1;
+	ct.lineJoin="round";
+	ct.lineCap="round";
+	ct.beginPath();
+	ct.moveTo(ox,oy);
+	ct.lineTo(x,y);
+	ct.stroke();
+}
+
+function scx(){return document.documentElement.scrollLeft || document.body.scrollLeft;}
+function scy(){return document.documentElement.scrollTop  || document.body.scrollTop ;}
+mam_draw_init();
 </script>
 </body>
 </html>