لقد قمت مؤخرًا بدراسة بعض سمات العناصر الجديدة في HTML5 ووجدت أنها سهلة الاستخدام حقًا، خاصة عنصر العلامة Canvas الجديد. المقدمة الرسمية: Canvas API (canvas) هي علامة جديدة في HTML5 تُستخدم لإنشاء صور في الوقت الفعلي على صفحات الويب ويمكنها معالجة محتوى الصورة بشكل أساسي، وهي عبارة عن صورة نقطية يمكن معالجتها باستخدام JavaScript. يستخدم ما يلي JavaScript مع Canvas لتنفيذ وظيفة لوحة الرسم
صورة توضيحية للتأثير:
جزء الكود (انسخه مباشرة واستخدمه)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>ينفذ JavaScript+Canvas لوحة رسم مخصصة</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var Canvas = document.getElementById(canvas); // ارسم مستطيلًا أسود ctx.fillStyle=black; ctx.fillRect(0,0,600,300); // اضغط على العلامة var onoff = false; // يمثل المتغيران oldx وoldy الإحداثيات قبل تحريك الماوس var oldx = -10 var oldy = -10; // اضبط اللون var linecolor = أبيض // اضبط عرض الخط var linw = 4; // إضافة حدث تحريك الماوس Canvas.addEventListener(mousemove,draw,true); // المعلمة الثالثة تتعلق بشكل أساسي بالالتقاط أو الفقاعات // إضافة حدث الضغط على الماوس Canvas.addEventListener(mousedown,down,false); up events.addEventListener(mouseup,up,false function down(event){ onoff = true; events.pageY-10; //console.log(event.pageX+'............000.............'+event.pageY) / /event.pageX وevent.pageY مرتبطان بموضع الماوس للصفحة بأكملها بما في ذلك الجزء الفائض (أي شريط التمرير) } function up(){ onoff = false } function draw(event){ if(onoff == صحيح) { var newx = events.pageX-10; events.pageY-10; ctx.beginPath();//beginPath() يتجاهل أي مسار محدد حاليًا ويبدأ مسارًا جديدًا. يقوم بتعيين النقطة الحالية إلى (0,0). ctx.moveTo(oldx,oldy); // انتقل إلى الإحداثي عند النقر عليه، مع جعل هذا الإحداثي هو الأصل ctx.lineWidth=linw; ctx.lineCap=round; ctx.stroke();// سترسم طريقة السكتة الدماغية () المسار المحدد بواسطة طريقتي moveTo () وlineTo (). اللون الافتراضي هو أسود. // قم بتعيين موضع الماوس الجديد لإحداثيات البداية لبداية الرسم التالية oldx = newx; newy };</script></body></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.