تعليق: عند إنشاء لوحة رسم ، نستخدم بشكل طبيعي قماش HTML5 لتحقيق ذلك. في القماش ، يمكننا رسم دوائر ومستطيلات وخطوط مخصصة ، إلخ. هذه المرة نستخدم الدوائر والخطوط بشكل أساسي لتحقيق ذلك. استجابة دعم لمسة الأحداث في HTML
أول شيء نلاحظه هو أننا لا نرسم بالماوس ، ولكن باستخدام أصابعنا على جهاز اللمس ، مثل iPad.
لعمل لوحة رسم ، نستخدم بشكل طبيعي قماش HTML5 لتحقيق ذلك. في القماش ، يمكننا رسم دوائر ومستطيلات وخطوط مخصصة ، إلخ. هذه المرة نستخدم الدوائر والخطوط بشكل أساسي لتحقيق ذلك. يتم دعم الاستجابة لأحداث اللمس في HTML.
onTouchstart Touch Start
ontouchmove touch تم انتقاد
onTouchend touch end
مع هذه الأحداث ، من السهل جدًا علينا أن نرسم في المتصفح بأصابعنا.
الآثار على iPad:
الفكرة: عندما يلمس إصبعك الشاشة ، أضف دائرة إلى موضع اللمس للإصبع في حدث OnTouchStart ؛ عندما يبدأ إصبعك في الانزلاق ، ارسم خطوطًا باستمرار من نقطة اللمس السابقة إلى النقطة التالية في OntouchMove.
HTML:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> قماش </title>
<meta name = "viewport" content = "width = width device ، accalable = 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) ؛
}
آخر
{
في حالة تأهب ("قابلة لللمس كاذبة!") ؛
}
// إحداثيات اللمس الأخيرة
var lastx ؛
var lasty ؛ </p> <p> var ctx = canvas.getContext ("2d") ؛
ctx.linewidth = 10 ؛ // سماكة الفرشاة
ctx.strokestyle = "#ff0000" ؛ // Brush Color </p> <p> // touch start event
وظيفة onTouchStart (الحدث) {
Event.PreventDefault () ؛
lastx = event.touches [0] .clientx ؛
lasty = 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 ؛
lasty = event.touches [0] .clienty ؛
}
catch (err) {
تنبيه (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 () ؛
}
// ارسم الخطوط
دالة السحب (startx ، starty ، endx ، endy)
{
ctx.beginpath () ؛
CTX.LINECAP = "Round" ؛
ctx.moveto (startx ، starty) ؛
ctx.lineto (endx ، endy) ؛
ctx.stroke () ؛
}
النقاط الرئيسية:
ctx.linecap = جولة ؛ يضع غطاء النمط في نهاية الخط المرسوم إلى دائرة. هذا مهم للغاية ، وإلا سيكون هناك نطاقات مكسورة في الأماكن التي تتغير فيها زاوية الخط بشكل كبير.
Event.PreventDefault () ؛ يلغي الإجراء الافتراضي للحدث. يجب ضبط هذه الطريقة أثناء الحدث المنزلق. بخلاف ذلك ، سيتم تشغيل الحدث الانزلاق الافتراضي للمتصفح عند الانزلاق ، وسيحدث التأثير المنسدل في الصفحة ، ولن تتمكن من رسمه.