تقدم هذه المقالة بشكل رئيسي:
الاسم: لوحة الرسم الذكية
مكدس التكنولوجيا: HTML5، CSS3، جافا سكريبت، المحمول
وصف الوظيفة:
عنوان معاينة عنوان المشروع
معاينة
معاينة الكمبيوتر:
معاينة الجوال:
بعد قراءة المعاينة أعلاه وتجربة لوحة الرسم الذكية ، أعتقد أنه لا بأس، تذكر أن تشيد بها. بغض النظر عما إذا كنت متحمسًا للغاية أم لا، فأنا متحمس جدًا على أي حال، وأنا فخور جدًا بذلك لقد حققت نتائج المشروع، لقد قلت ذلك، والآن يمكنك البدء في كتابة التعليمات البرمجية لتحقيق التأثير الذي تريده! ! !
ملاحظة: ترتبط تأثيرات المشروع التالية بشكل أساسي بجافا سكريبت، وفيما يلي الكود الذي يوفر أفكار التنفيذ فقط، وليس الكود بأكمله .
3. تحقيق نتائج المشروع خطوة بخطوة(1) صفحة التحليل
من خلال مخطط حالة الاستخدام ، نعرف ما هي الوظائف التي يمكن للمستخدمين استخدامها للدخول إلى موقعنا؟
ما يمكن للمستخدمين القيام به:
(2) تخطيط HTML
عندما كتبت لغة HTML، قدمت ملفات CSS وملفات JS
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-scale=1.0> <meta http-equiv=X-UA -محتوى متوافق=ie=edge> <title>لوحة الرسم الذكية</title> <link rel=shortcut icon href=./image/favicon.png type=image/x-icon> <link rel=stylesheet href=./css/style.css></head><body> <canvas id=canvas></canvas> <div class=bg-btn></ div> <div class=color-group id=bgGroup> <h3>حدد لون الخلفية:</h3> <ul class=clearfix> <li class=bgcolor-item style=background-color: أزرق؛></li> <li class=bgcolor-item style=background-color: أسود;></li> <li class=bgcolor-item style=background-color: #FF3333;></li> <li class=bgcolor-item style=background-color: #0066FF;></li> <li class=bgcolor-item style=background-color: #FFFF33;></li> <li class=bgcolor-item style=background-color: #33CC66;></li> <li class=bgcolor-item style=background-color: Gray;></li> <li class=bgcolor-item style=background- اللون: #F34334;></li> <li class=bgcolor-item style=background-color: #fff;box-shadow: 0 1px 2px 0 rgba(32,33,36,0.28);></li> <li class=bgcolor-item style=background-color: #9B27AC;></li> <li class=bgcolor-item style=background-color: #4CB050;></li> <li class=bgcolor-item style=background-color: #029688;></li> </ul> <i class= CloseBtn></i> </div> <div class=tools> <div class=container> <button class=save id=save <button class=brush active id=brush <button class=eraser id=eraser < فئة الزر=معرف واضح=مسح <button class=undo id=undo <button class=redo id=redo </div> </div> <div class=pen-detail id=penDetail> <i class= CloseBtn></i> <p>حجم القلم</p> <span class=circle-box><i id=thickness></i></span> <input type=range id=range1 min=1 max=10 value=1> <p>لون القلم</p> <ul class=pen-color Clearfix> <li class=color-item active style=background-color: black;></ لى> <لى class=color-item style=background-color: #FF3333;></li> <li class=color-item style=background-color: #99CC00;></li> <li class=color-item style=background -اللون: #0066FF;></li> <li class=color-item style=background-color: #FFFF33;></li> <li class=color-item style=background-color: #33CC66;></li> </ul> <p>التعتيم</p> <i class=showOpacity></i> <input type=range id=range2 min=1 max=10 value=1> </ / div> <script src=./js/main.js></script></body></html>
(3) استخدم CSS لتجميل الواجهة
يمكن أن يقوم كود CSS بتجميل الواجهة وفقًا للعادات الشخصية، لذلك لن أكتب كود CSS هنا، يمكنك إلقاء نظرة مباشرة على كود المشروع أو مراجعة العناصر من أدوات المطور. إذا كان لديك أي أسئلة، يمكنك الدردشة معي على انفراد، ولا أعتقد أنها مشكلة كبيرة.
(4) استخدم JS لتنفيذ وظائف محددة للمشروع
1. التحضير
أولاً، قم بإعداد حاوية، وهي عبارة عن لوحة رسم. تمت كتابة الحاوية بلغة HTML السابقة. هذا محض هراء.
<معرف القماش=canvas></canvas>
ثم قم بتهيئة js
Let Canvas = document.getElementById('canvas');let context = Canvas.getContext('2d'); أخطط لجعل لوحة الرسم في وضع ملء الشاشة، لذا سأقوم بعد ذلك بتعيين عرض canvas
Let pageWidth = document.documentElement.clientWidth;let pageHeight = document.documentElement.clientHeight;canvas.width = pageWidth;canvas.height = pageHeight;
نظرًا لأن بعض IEs لا تدعم canvas ، إذا أردنا أن نكون متوافقين مع IE، فيمكننا إنشاء canvas ، ثم تهيئتها باستخدام excanvas ، وإضافة exCanvas.js لـ IE، ونحن لا نأخذ IE بعين الاعتبار هنا.
ولكن عندما أقوم بتغيير نافذة المتصفح على جهاز الكمبيوتر الخاص بي، لا يتم تغيير حجم لوحة الرسم بشكل تكيفي. حل:
// تذكر تنفيذ وظيفة autoSetSize function autoSetSize(){ CanvasSetSize(); // عند تنفيذ هذه الوظيفة، سيتم تعيين عرض اللوحة القماشية وارتفاعها أولاً function CanvasSetSize(){ Let pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; Canvas.width = pageWidth; بعد تغيير حجم النافذة، سيتم تشغيل حدث تغيير الحجم لإعادة ضبط عرض وارتفاع نافذة اللوحة القماشية.onresize = function(){ CanvasSetSize() }};2. إدراك وظيفة الرسم
فكرة التنفيذ: استمع إلى أحداث الماوس واستخدم طريقة drawLine() لرسم البيانات المسجلة.
painting = false .mousedown )، اضبط painting على true ، للإشارة إلى أن الرسم قيد التنفيذ ولم يتم تحرير الماوس. تسجيل نقرات الماوس.mousemove ). إذا تحرك الماوس بسرعة كبيرة، فلن يتمكن المتصفح من مواكبة سرعة الرسم، وستظهر فجوات بين النقاط، لذلك نحتاج إلى ربط النقاط المرسومة بالخطوط ( lineTo() ).mouseup )، قم بتعيين painting على false . ملحوظة: طريقة drawCircle هذه لا تحتاج في الواقع إلى الكتابة، وهذا فقط للسماح للجميع بمعرفة من أين يبدأ النقر؟
function learnToUser() { // حدد متغيرًا لتهيئة حالة الفرشاة Let Painting = false; = function (e){ Painting = true; Let x = e.clientX; Let y = e.clientY; drawCircle(x,y,5); } // حدث تحريك الماوس Canvas.onmousemove = function(e){ if(painting){ Let x = e.clientX; :x,'y':y}; drawLine(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y); حدث إطلاق الماوس Canvas.onmouseup = function(){ Painting = false }}// وظيفة رسم النقطة function drawCircle(x,y,radius){ // إنشاء مسار جديد، يتم توجيه أمر رسم الرسومات إلى ملف المسار إنشاء المسار. context.beginPath(); // ارسم قوسًا (دائرة) بحيث يكون (x, y) هو المركز ونصف القطر هو نصف القطر، // بدءًا من startAngle وينتهي عند endAngle، في الاتجاه المعطى بعكس اتجاه عقارب الساعة (الافتراضي هو اتجاه عقارب الساعة) ) لتوليد. context.arc(x,y,radius,0,Math.PI*2); // أنشئ رسمًا صلبًا عن طريق ملء منطقة محتوى المسار context.fill(); // بعد إغلاق المسار، الرسم تتم إعادة توجيه أمر الرسم إلى السياق. context. ClosePath();} function drawLine(x1,y1,x2,y2){ // تعيين عرض الخط context.lineWidth = 10; // تعيين نمط نهاية الخط. context.lineCap = round; // تعيين نمط المفصل بين السطور context.lineJoin = round; / lineTo(x, y) يرسم خطًا مستقيمًا من الموضع الحالي إلى موضع x وy المحدد context.lineTo(x2,y2); // ارسم المخطط التفصيلي من خلال الخطوط context.stroke(); سياق.إغلاق المسار ()؛}3. تنفيذ وظيفة الممحاة
أفكار التنفيذ:
eraserEnabled = false .click فوق الممحاة، وانقر فوق الممحاة، وقم بتغيير حالة الممحاة، eraserEnabled = true ، وقم بتبديل الفئة لتحقيق التأثير المنشط .eraserEnabled true ، حرك الماوس واستخدم context.clearRect() لتنفيذ الممحاة. لكنني وجدت أنه في واجهة برمجة تطبيقات Canvas، يمكن لطريقة ClearRect مسح وحدات البكسل، لكن طريقة ClearRect تمسح المنطقة المستطيلة بعد كل شيء، اعتاد معظم الأشخاص على أن تكون مستديرة، لذلك تم تقديم الوظيفة القوية لمنطقة القطع هي طريقة المقطع. تستخدم التعليمة البرمجية التالية context.clearRect() لتنفيذ الممحاة. يرجى الاطلاع على قسم خطوة بخطوة لمعرفة كيفية تنفيذ السسافراس المطاطي بشكل أفضل.
دع ممحاة = document.getElementById(eraser);let riserEnabled = false;// تذكر تنفيذ وظيفة الاستماع إلى المستخدم وظيفة الاستماع إلى المستخدم() { // ... يعني أنه تم حذف الكود المكتوب مسبقًا // ... // اضغط بالماوس على التالي حدث Canvas.onmousedown = function(e){ // ... if(eraserEnabled){// لاستخدام الممحاة context.clearRect(x-5,y-5,10,10) }else{ lastPoint = {'x':x,'y':y} } } // حدث تحريك الماوس Canvas.onmousemove = function(e){ Let x = e.clientX; Let y = e.clientY if( !painting){return} if(eraserEnabled){ context.clearRect(x-5,y-5,10,10); {'x':x,'y':y}; drawLine(lastPoint.x, lastPoint.y,newPoint.x, newPoint.y); lastPoint = newPoint; } // ...}// انقر فوق الممحاة ممحاة.onclick = function(){ ممحاة Enabled = true;4. تنفيذ وظيفة مسح الشاشة
أفكار التنفيذ:
الحصول على عقدة العنصر
انقر فوق الزر "مسح" لمسح اللوحة القماشية.
Let reSetCanvas = document.getElementById(clear);// تحقيق مسح الشاشة reSetCanvas.onclick = function(){ ctx.clearRect(0,0,canvas.width,canvas.height); setCanvasBg('white');}// إعادة تعيين وظيفة لون خلفية القماش setCanvasBg(color) { ctx.fillStyle = color ctx.fillRect(0, 0، قماش.عرض، قماش.ارتفاع)؛}5. تنفيذ وظيفة الحفظ كصورة
أفكار التنفيذ:
Let save = document.getElementById(save); // تنزيل الصورة save.onclick = function(){ Let imgUrl = Canvas.toDataURL('image/png'); body.appendChild(saveA); saveA.href = imgUrl; saveA.download = 'mypic'+(new Date).getTime(); saveA.target = '_blank'; saveA.click();}6. تنفيذ وظيفة تغيير لون الخلفية
أفكار التنفيذ:
Let SelectBg = document.querySelector('.bg-btn');let bgGroup = document.querySelector('.color-group');let bgcolorBtn = document.querySelectorAll('.bgcolor-item');let penDetail = document.getElementById('.bgcolor-item'); getElementById(penDetail);let activeBgColor = '#fff';//تم تنفيذ تبديل لون الخلفية لـ (let i = 0; i < bgcolorBtn.length; i++) { bgcolorBtn[i].onclick = function (e) { // Stop bubbling e.stopPropagation(); for (let i = 0; i < bgcolorBtn.length ; i++) { bgcolorBtn[i].classList.remove(active); this.classList.add(activeBgColor = this.style.backgroundColor; setCanvasBg(activeBgColor); active'); e.stopPropagation();}7. تنفيذ وظيفة تغيير سمك الفرشاة
أفكار التنفيذ:
Let range1 = document.getElementById('range1');let lWidth = 2;let ifPop = false;range1.onchange = function(){ console.log(range1.value); style.transform = 'scale('+ (parseInt(range1.value)) +')'; console.log(thickness.style.transform ) lWidth = parseInt(range1.value*2);}// وظيفة رسم الخط function drawLine(x1,y1,x2,y2){ // ... context.lineWidth = lWidth // ...}// انقر فوق فرشاة الفرشاة onclick = function(){raserEnabled = false; المربع المنبثق console.log('pop') penDetail.classList.add('active'); }else{ penDetail.classList.remove('active'); } ifPop = !ifPop;}8. تنفيذ وظيفة تغيير لون الفرشاة
فكرة التنفيذ مشابهة لفكرة تغيير لون خلفية لوحة الرسم .
Let aColorBtn = document.getElementsByClassName(color-item);getColor();function getColor(){ for (let i = 0; i < aColorBtn.length; i++) { aColorBtn[i].onclick = function () { for ( دع i = 0; i < aColorBtn. length i++) { aColorBtn[i].classList.remove(active); this.classList.add(activeColor = this.style.backgroundColor; ctx.fillStyle = activeColor; ctx.strokeStyle = activeColor;9. تنفيذ وظائف التراجع وإعادة التغييرات
أفكار التنفيذ:
canvasHistory في كل مرة تكتمل فيها عملية رسم (استخدم طريقة toDataURL() الخاصة بالقماش لإنشاء لقطة، والتي تنشئ صورة base64)؛canvasHistory باستخدام طريقة drawImage() الخاصة بالقماش؛ Let undo = document.getElementById(undo);let redo = document.getElementById(redo);// ...canvas.onmouseup = function(){ Painting = false;}let CanvasHistory = [];let step = -1; // طريقة الرسم function CanvasDraw(){ step++; if(step < CanvasHistory.length){ CanvasHistory. length = step} // أضف رسمًا جديدًا إلى السجل CanvasHistory.push(canvas.toDataURL());}// طريقة التراجع function CanvasUndo(){ if(step > 0){ step--; // ctx.clearRect(0,0,canvas .width,canvas.height); اسمحوا CanvasPic = new Image(); ctx.drawImage(canvasPic, 0, 0) } undo.classList.add('active'); }else{ undo.classList.remove('active'); / طريقة الإعادة function CanvasRedo(){ if(step < CanvasHistory.length - 1){ step++; Let CanvasPic = new Image(); CanvasHistory[step]; 'active') }else { redo.classList.remove('active') تنبيه('السجل الأخير بالفعل'); }}undo.onclick = function(){ CanvasUndo();}redo.onclick = function(){ CanvasRedo();}10. متوافق مع المحطات المتنقلة
أفكار التنفيذ:
true ، يتم استخدام حدث touch ، false استخدام حدث mouse // ...if (document.body.ontouchstart !== غير محدد) { // استخدم حدث اللمس anvas.ontouchstart = function (e) { // ابدأ اللمس} Canvas.ontouchmove = function (e) { // ابدأ الانزلاق } Canvas.ontouchend = function () { // نهاية الانزلاق }}else{ // حدث استخدام الماوس // ... } // ... 4. الدوس على العثرات المشكلة 1: عند تغيير نافذة المتصفح على جهاز الكمبيوتر الخاص بك، لن تتكيف لوحة الرسم.حل:
في معالجة حدث الاستجابة لتغيير الحجم، تكون معلمات حجم الصفحة التي تم الحصول عليها هي المعلمات التي تم تغييرها.
عندما يتغير حجم النافذة، قم بإعادة تعيين عرض اللوحة القماشية وارتفاعها. وببساطة، بعد تغيير النافذة، قم بإعادة تعيين Canvas.width وcanvas.height.
// تذكر تنفيذ وظيفة autoSetSize function autoSetSize(){ CanvasSetSize(); // عند تنفيذ هذه الوظيفة، سيتم تعيين عرض اللوحة القماشية وارتفاعها أولاً function CanvasSetSize(){ Let pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; Canvas.width = pageWidth; بعد تغيير حجم النافذة، سيتم تشغيل حدث تغيير الحجم لإعادة ضبط عرض وارتفاع نافذة اللوحة القماشية.onresize = function(){ CanvasSetSize() }}; السؤال 2: عندما يكون عرض الخط المرسوم صغيرًا نسبيًا، فلا بأس، ولكن بمجرد أن يصبح أكثر سمكًا، ستحدث المشاكل.الحل: قم بإلقاء نظرة على الوثائق واكتشف الطريقة، ما عليك سوى تعديل التعليمات البرمجية لرسم الخطوط .
// وظيفة رسم الخط function drawLine(x1,y1,x2,y2){ context.beginPath(); context.lineWidth = lWidth; //-----إضافة----- // تعيين نمط نهاية الخط. context.lineCap = round; // تعيين نمط الوصلات بين الأسطر context.lineJoin = round //-----Join----- context.moveTo(x1,y1); y2); context.stroke(); السؤال 3: كيفية الحصول على السسافراس المطاطية المستديرة؟حل:
في واجهة برمجة تطبيقات Canvas، يمكن لطريقة ClearRect مسح وحدات البكسل، لكن طريقة ClearRect تمسح منطقة مستطيلة بعد كل شيء، اعتاد معظم الأشخاص على أن تكون المحايات مستديرة، لذلك تم تقديم الوظيفة القوية لمنطقة القطع، وهي طريقة القص. الاستخدام بسيط للغاية:
ctx.save()ctx.beginPath()ctx.arc(x2,y2,a,0,2*Math.PI);ctx.clip()ctx.clearRect(0,0,canvas.width,canvas.height) ;ctx.restore();
يدرك الكود أعلاه مسح منطقة دائرية، أي أنه ينفذ أولاً مسارًا دائريًا، ثم يستخدم هذا المسار كمنطقة قطع، ثم يمسح وحدات البكسل. هناك شيء واحد يجب ملاحظته وهو أنك تحتاج إلى حفظ بيئة الرسم أولاً، وإعادة تعيين بيئة الرسم بعد مسح وحدات البكسل. إذا لم تقم بإعادة التعيين، فستقتصر الرسومات المستقبلية على منطقة القطع هذه.
السؤال 4: كيف تكون متوافقة مع المحطات المتنقلة؟1.إضافة علامة التعريف
نظرًا لأن المتصفح سيقوم في البداية بتحجيم الصفحة عند عرضها على الهاتف المحمول، فيمكننا تعيين سمة إطار العرض التعريفي في العلامة الوصفية لإخبار المتصفح بعدم تغيير حجم الصفحة = عرض شاشة جهاز المستخدم
< اسم التعريف = منفذ العرض content=width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0/>/*عرض الصفحة=عرض الجوال:العرض=عرض الجهاز لا يمكن للمستخدم القياس: قابل للتحجيم بواسطة المستخدم = لا يوجد مقياس: المقياس الأولي = 1 الحد الأقصى للقياس: الحد الأقصى للمقياس = 1.0 الحد الأدنى للقياس: الحد الأدنى للمقياس = 1.0 * /
2. يتم استخدام جميع أحداث اللمس تقريبًا على جانب الهاتف المحمول، وهو ما يختلف عن جانب الكمبيوتر الشخصي.
نظرًا لأن الجانب المحمول يستخدم أحداث اللمس، يتم استخدام سمات H5 touchstart/touchmove/touchend ومع ذلك، يدعم جانب الكمبيوتر أحداث الماوس فقط، لذلك يلزم اكتشاف الميزات.
في حدث touch ، يتم الحصول على الإحداثيات من خلال .touches[0].clientX و .touches[0].clientY ، والتي يجب تمييزها عن حدث mouse .
حسنًا، إنها ليست مشكلة كبيرة. إنها مجرد أنني فاتني كتابة context.beginPath(); وأمضيت بعض الوقت في حل الخلل فيها. وهذا يذكرني بوجود عشرات الملايين من أسطر التعليمات البرمجية والسطر الأول من التعليقات غير موحدة؛ البرمجة غير موحدة، وزميلي لديه خطين، من الأفضل أن تعمل وفقًا لمواصفات التشغيل الموثقة، رائحتها طيبة جدًا! ! !
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.