يعد Canvas جزءًا من HTML5 ويسمح للغات البرمجة النصية بعرض الصور ديناميكيًا. يحدد Canvas المنطقة. يمكن تحديد عرض المنطقة وارتفاعها من خلال سمات HTML. يمكن لرمز JavaScript الوصول إلى المنطقة وتقديم عروض ديناميكية على صفحة الويب من خلال مجموعة كاملة من وظائف الرسم (API).
2. ما الذي يمكن أن تفعله اللوحة القماشية؟الألعاب: لا شك أن الألعاب تلعب دورًا مهمًا في مجال HTML5. يعد HTML5 أكثر ثلاثية الأبعاد وأكثر تعقيدًا من Flash من حيث عرض الصور على الويب.
إنتاج الرسوم البيانية: غالبًا ما يتجاهل الأشخاص إنتاج الرسوم البيانية، ولكن التواصل والتعاون داخل المؤسسة أو بين المؤسسات لا يمكن فصلهما عن الرسوم البيانية. يستخدم بعض المطورين الآن HTML/CSS لإنشاء الرموز. بالطبع، يعد استخدام SVG (Scalable Vector Graphics) لإكمال إنتاج المخططات طريقة جيدة جدًا أيضًا.
تصميم الخطوط: سيكون العرض المخصص للخطوط قائمًا بالكامل على الويب وسيتم تنفيذه باستخدام تقنية HTML5.
محرر الرسومات: يمكن أن يعتمد محرر الرسومات على الويب بنسبة 100%.
المحتوى الآخر الذي يمكن تضمينه في موقع الويب: مثل الرسومات والصوت والفيديو والعديد من العناصر الأخرى يمكن دمجه بشكل أفضل مع الويب ولا يتطلب أي مكونات إضافية.
3. الاستخدام الأساسي للقماش1. عند استخدام <canvas>، يجب عليك أولاً تعيين سمات العرض والارتفاع وتحديد حجم المنطقة القابلة للرسم. إذا قمت فقط بتحديد العرض والارتفاع دون إضافة أنماط أو رسم صور، فلن يكون العنصر مرئيًا على الصفحة .
<معرف القماش='draw' width='200px' height='200px'></canvas>
2. لرسم صورة، نحتاج أولاً إلى الحصول على اللوحة القماشية واستدعاء طريقة getContext()، ثم تمرير اسم السياق (2D/3D). يحتوي 2D على عمليتين أساسيتين للرسم | ) |. القيمة الافتراضية لهاتين الخاصيتين هي #000
var draw = document.getElementById('draw'); // تأكد مما إذا كان المتصفح يدعم عنصر <canvas> if(draw.getContext){ var context = draw.getContext('2d'); سياق السياق.strokeStyle = '#f00'; // لون البراري المملوء داخليًا context.fillStyle = '#0f0';}3. استخدم طريقة toDataURL() لتصدير الصورة المرسومة على عنصر <canvas>.
var draw = document.getElementById('draw');if(draw.getContext){ // عرض الصورة، toDataURL () يحصل على سلسلة من سلسلة base64 var drawURL = draw.toDataURL('image/png') var image = document.createElement('img');4. هناك ثلاث طرق رئيسية لرسم مستطيل. fillRect() هو لون تعبئة المستطيل، وStrokeRect() هو حد المستطيل، وclearRect() يمسح المستطيل. تتلقى جميع هذه الطرق الثلاث 4 معلمات x/y/w/h، وإحداثيات الزاوية اليسرى العليا للمستطيل والعرض والارتفاع.
var draw = document.getElementById('draw'); // تأكد مما إذا كان المتصفح يدعم عنصر <canvas> if(draw.getContext){ var context = draw.getContext('2d'); حافة مخطط أخضر.fillStyle = '#f00'; context.strokeStyle = '#0f0'; context.fillRect(10,10,50,50); // ارسم مستطيلًا أخضر بخط أحمر context.fillStyle = '#0f0'; context.strokeStyle = '#f00'; , 50); context.fillRect(10,10,50,50); // امسح مستطيلًا صغيرًا يتداخل فيه المستطيلان context.clearRect(40,40,10,10);}5. رسم المسارات يمكن إنشاء أشكال وخطوط معقدة من خلال المسارات. لرسم مسار، قم أولاً باستدعاء الأسلوب beginPath()، ثم استخدم الطريقة التالية لرسم المسار فعليًا.
قوس (س، ص، نصف القطر، زاوية البداية، زاوية النهاية، عكس اتجاه عقارب الساعة)
(س، ص) إحداثيات مركز الدائرة، نصف القطر، (زاوية البداية، زاوية النهاية) زاوية البداية وزاوية النهاية، عكس اتجاه عقارب الساعة (خطأ)/عكس اتجاه عقارب الساعة (صحيح)
moveTo(x,y) ينقل المؤشر إلى (x,y) دون رسم خط. يمكن استخدامها لتعديل ما يسمى بإحداثيات النقطة السابقة*
قوس إلى(x1,y1,x2,y2,نصف القطر)
ارسم منحنى يبدأ من النقطة السابقة إلى (x2, y2) ويمر عبر (x1, y1) بنصف القطر المعطى
lineTo(x,y) يرسم خطًا مستقيمًا من النقطة السابقة إلى (x,y)
المستقيم (س، ص، العرض، الارتفاع)
ارسم مستطيلاً بدءًا من (x، y)، بحيث يكون العرض والارتفاع هو العرض والارتفاع. ترسم هذه الطريقة مسارًا مستطيلًا بدلًا من الأشكال المستقلة المرسومة بواسطة StrokeRect() و fillRect()
// بعد ذلك ارسم ساعة بدون أرقام var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); // ابدأ المسار context.beginPath( ); / ارسم الدائرة الخارجية context.arc(100,100,99,0,2*Math.PI,false); // ارسم الدائرة الداخلية context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); // ارسم عقرب الدقائق context.moveTo(100,100); ,15) ; // ارسم عقرب الساعة context.moveTo(100,100); // مسار السكتة الدماغية context.stroke();6. هناك طريقتان رئيسيتان لرسم النص، fillText() وStrokeText()، وكلاهما يتلقى أربع معلمات |text (النص الذي سيتم رسمه)|x|y|الحد الأقصى لعرض البكسل (اختياري)| بناء على السمات الثلاث التالية
نمط نص الخط والحجم والخط وما إلى ذلك.
محاذاة النص محاذاة النص |البداية|النهاية|اليسار|اليمين|الوسط|
textBaseline الخط الأساسي للنص|أعلى|معلق|وسط|أبجدي|إيديوغرافي|أسفل|
// ارسم الساعة 12 على القرص context.font = 'bold 12px Arial'; context.textAlign = 'center';
7. التحول
تدوير (ملاك) يقوم بتدوير زاوية الصورة بالراديان حول الأصل
يقوم Scale(scaleX,scaleY) بتحجيم الصورة، حيث أن القيمة الافتراضية x*scaleX,y*scaleY هي 1
ترجمة (x,y) تنقل أصل الإحداثيات إلى (x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); // ابدأ المسار context.beginPath(); 100,100,99,0,2*Math.PI,false); //ارسم الدائرة الداخلية context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); // تحويل الأصل context.translate(100,100); // تدوير اليد context.rotate(1) // ارسم سياق عقرب الدقائق. moveTo(0, 0); context.lineTo(0,-85); // ارسم عقرب الساعة context.moveTo(0,0); // مسار السكتة الدماغية context.stroke();8. ارسم صورة، drawImage()
var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9 معلمات: الصورة المراد رسمها، الصورة الأصلية |x|y|w|h|، الصورة المستهدفة |x|y|w|h|
9. الظلال والتدرجات
يحتوي Shadow بشكل أساسي على قيم السمات التالية:
var context = draw.getContext('2d'); //Set Shadow context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; ينشئ التدرج طريقة تدرج خطي جديدة، هناك هي أربع معلمات |x1|y1|x2|y2| وهي إحداثيات نقطة البداية وإحداثيات نقطة النهاية var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0 يعني بداية التدرج.addColorStop(1,'#000'); //1 يعني النهاية//Use سمة التدرج المحددة context.fillStyle = gradient; // ضع التدرج عند التعبئة context.fillRect(30,30,50,50);قم بإنشاء تدرج نصف قطري createRadialGradient()، المعلمات الستة |x1|y2|radius1|x2|y2|radius2| هي مركز الدائرة الأولى ونصف القطر ومركز الدائرة الثانية ونصف القطر على التوالي.
10. باستخدام بيانات الصورة، يمكنك الحصول على بيانات الصورة الأصلية من خلال getImageData(). أربع معلمات |x|y|w|h|. يحتوي كل كائن ImageData على ثلاث سمات، العرض/الارتفاع/البيانات. البيانات عبارة عن مصفوفة تقوم بتخزين بيانات كل بكسل داخليًا. تتراوح قيمة كل عنصر بين 0-255.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3]; مرشح رمادي var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha // ارسم الصورة الأصلية context.drawImage(img,0,0,100,100); الحصول على بيانات الصورة imageData = context.getImageData(0,0,img.width,img.height data = imageData.data; for(i=0,len=data. length;i<len;i+=4){ red = data[i]; i+3]; // احسب متوسط rgb = Math.floor((red+green+blue)/3); // تعيين قيمة اللون data[i] = Average; ; data[i+2] = Average; } imageData.data = data; // ارسم البيانات على اللوحة القماشية context.putImageData(imageData,0,0)}ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.