ความคิดเห็น: เมื่อสร้างกระดานวาดภาพเราใช้ผืนผ้าใบของ HTML5 โดยธรรมชาติเพื่อให้ได้มัน ในผืนผ้าใบเราสามารถวาดวงกลม, สี่เหลี่ยม, เส้นที่กำหนดเอง ฯลฯ ในครั้งนี้เราใช้วงกลมและเส้นเพื่อให้บรรลุ สนับสนุนการตอบสนองต่อเหตุการณ์การสัมผัสใน HTML
สิ่งแรกที่ควรทราบคือเราไม่ได้วาดด้วยเมาส์ แต่ใช้นิ้วของเราบนอุปกรณ์สัมผัสเช่น iPad
ในการสร้างกระดานวาดภาพเราใช้ผืนผ้าใบของ HTML5 เพื่อให้ได้มัน ในผืนผ้าใบเราสามารถวาดวงกลม, สี่เหลี่ยม, เส้นที่กำหนดเอง ฯลฯ ในครั้งนี้เราใช้วงกลมและเส้นเพื่อให้บรรลุ การตอบสนองต่อเหตุการณ์การสัมผัสได้รับการสนับสนุนใน HTML
ontouchstart touch เริ่มต้น
ontouchmove touch swipe
OnTouchend Touch End
ด้วยเหตุการณ์เหล่านี้มันเป็นเรื่องง่ายมากที่เราจะวาดในเบราว์เซอร์ด้วยนิ้วของเรา
ผลกระทบต่อ iPad:
แนวคิด: เมื่อนิ้วของคุณสัมผัสหน้าจอให้เพิ่มวงกลมไปยังตำแหน่งสัมผัสของนิ้วในเหตุการณ์ OnTouchStart; เมื่อนิ้วของคุณเริ่มเลื่อนให้วาดเส้นจากจุดสัมผัสก่อนหน้าไปยังจุดถัดไปใน OntouchMove
html:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Canvas </title>
<meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ผู้ใช้-scalable = no">>
</head>
<body>
<Canvas>/Canvas>
<script type = "text/javascript" src = "canvasscript.js" charset = "utf-8"> </script>
</body>
</html>
JS:
// รับผ้าใบ
var canvas = document.getElementById ("Canvas");
// เต็มหน้าจอ
canvas.width = window.innerWidth;
Canvas.height = window.innerHeight;
// ไม่ว่าจะรองรับการสัมผัส
var touchable = 'createTouch' ในเอกสาร;
ถ้า (สัมผัสได้) {
Canvas.addeventListener ('TouchStart', OnTouchStart, FALSE);
Canvas.addeventListener ('TouchMove', OntouchMove, False);
-
อื่น
-
การแจ้งเตือน ("สัมผัสได้เป็นเท็จ!");
-
// last touch coordinates
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext ("2d");
ctx.lineWidth = 10; // ความหนาของแปรง
ctx.strokestyle = "#ff0000"; // สีแปรง </p> <p> // เหตุการณ์เริ่มต้น
ฟังก์ชั่น ontouchstart (เหตุการณ์) {
Event.preventDefault ();
lastx = event.touches [0] .clientx;
LinSy = Event.touches [0] .Clienty;
drawround (lastx, lasty); </p> <p>}
// สัมผัสเหตุการณ์การเลื่อน
ฟังก์ชั่น ontouchmove (เหตุการณ์) {
พยายาม
-
Event.preventDefault ();
drawline (lastx, lasty, event.touches [0] .clientx, event.touches [0] .clienty);
lastx = event.touches [0] .clientx;
LinSy = Event.touches [0] .Clienty;
-
จับ (เอ่อ) {
การแจ้งเตือน (err.description);
} </p> <p>} </p> <p> // วาดวงกลม
ฟังก์ชั่นการวาด (x, y)
-
ctx.fillstyle = "#ff0000";
ctx.beginpath ();
ctx.arc (x, y, 5,0, math.pi*2, true);
ctx.closepath ();
ctx.fill ();
-
// วาดเส้น
ฟังก์ชั่น drawline (startx, starty, endx, endy)
-
ctx.beginpath ();
ctx.linecap = "รอบ";
ctx.moveto (startx, starty);
ctx.lineto (endx, endy);
ctx.stroke ();
-
ประเด็นสำคัญ:
ctx.linecap = รอบ; ตั้งค่าหมวกสไตล์ที่ส่วนท้ายของเส้นที่วาดเป็นวงกลม นี่เป็นสิ่งสำคัญมากมิฉะนั้นจะมีแถบที่แตกในสถานที่ที่มุมเส้นเปลี่ยนไปอย่างมาก
Event.preventDefault (); ยกเลิกการดำเนินการเริ่มต้นของเหตุการณ์ วิธีนี้จะต้องปรับในระหว่างเหตุการณ์การเลื่อน มิฉะนั้นเหตุการณ์การเลื่อนเริ่มต้นของเบราว์เซอร์จะถูกเรียกใช้เมื่อเลื่อนและเอฟเฟกต์แบบเลื่อนลงของหน้าจะเกิดขึ้นและคุณจะไม่สามารถวาดได้