<canvas></canvas> هي علامة جديدة في HTML5 تُستخدم لرسم الرسومات. في الواقع، هذه العلامة هي نفس العلامات الأخرى. وتتمثل ميزتها الخاصة في أن هذه العلامة يمكنها الحصول على كائن CanvasRenderingContext2D، والذي يمكننا استخدام برامج JavaScript النصية فيه للتحكم في هذا الكائن للرسم.
<canvas></canvas> هو مجرد حاوية لرسم الرسومات، بالإضافة إلى سمات مثل المعرف والفئة والنمط، فهو يحتوي أيضًا على سمات الارتفاع والعرض. هناك ثلاث خطوات رئيسية للرسم على عنصر <canvas>> :
<canvas> ، وهو كائن Canvas؛ فيما يلي مثال رسم <canvas> بسيط:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>عرض توضيحي لرسم القماش</title> <style type=text/css> #canvas{ border: 1px Solid #ADACB0; عرض: كتلة؛ الهامش: 20 بكسل تلقائي } </style></head><body> <canvas id=canvas width=300 height=300> متصفحك لا يدعم اللوحة القماشية بعد </canvas></body><script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); ونقطة النهاية context.moveTo(10,10); context.lineTo(200,200); // تعيين النمط context.lineWidth = 2; context.strokeStyle = #F5270B; // ارسم context.stroke();</script></html>إذا لم يتم تحديده من خلال moveTo()، فستعتمد نقطة البداية للخط lineTo() على النقطة السابقة. لذلك، إذا كنت بحاجة إلى إعادة تحديد نقطة البداية، فستحتاج إلى تمرير طريقة moveTo(). إذا كنت بحاجة إلى تعيين أنماط لمقاطع سطرية مختلفة، فستحتاج إلى إعادة فتح المسار من خلال context.beginPath()، إليك مثال:
<script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // تعيين نقطة البداية ونقطة النهاية للكائن context.beginPath(); 100,100); context.lineTo(700,100); context.lineTo(700,400); context.lineWidth = 2; #F5270B; // ارسم context.stroke(); context.beginPath(); context.moveTo(100,200); // تأثير استبدال moveTo بالسطر هنا هو نفسه context.lineTo(600,200); ) ; // إذا كان لون نمط السكتة الدماغية يحتوي على قيمة جديدة، فسوف يحل محل القيمة المحددة أعلاه // إذا لم يكن لدى LineWidth قيمة جديدة، فسيتم عرضها وفقًا للقيمة المحددة أعلاه context.strokeStyle = #0D25F6; context.stroke();</script>
رسم المستطيلات rect() و fillRect() وstrokeRect()
<script type=text/javascript> var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // استخدم الطريقة المستقيمة context.rect(10,10,190,190); fillStyle = #3EE4CB; context.strokeStyle = #F5270B; // استخدم طريقة fillRect context.fillStyle = #1424DE; context.fillRect(210,10,190,190); // استخدم طريقةstrokeStyle = #F5270B context.strokeRect(410,10,190,190); نفس الوقت context.fillStyle = #1424DE; context.strokeStyle = #F5270B; context.strokeRect(610,10,190,190); context.fillRect(610,10,190,190);</script>
يجب توضيح نقطتين هنا: النقطة الأولى هي الترتيب قبل وبعد رسم السكتة الدماغية () والتعبئة () إذا تم رسم التعبئة () لاحقًا، فعندما تكون حدود الحد أكبر، يتم رسم الحدود بواسطة السكتة الدماغية (). سيتم تغطية النصف بشكل واضح. النقطة الثانية: عند تعيين سمة fillStyle أو StrokeStyle، يمكنك تعيينها من خلال طريقة الإعداد rgba(255,0,0,0.2). المعلمة الأخيرة لهذا الإعداد هي الشفافية.
هناك شيء آخر متعلق بالرسم المستطيل: مسح المساحة المستطيلة: context.clearRect(x,y,width,height).
المعلمات المستلمة هي: موضع البداية للمستطيل الواضح وعرض المستطيل وطوله.
في الكود أعلاه، أضف في نهاية رسم الرسم البياني:
context.clearRect(100,60,600,100);
يمكن الحصول على التأثيرات التالية:
ارسم نجمة خماسيةمن خلال تحليل النجمة الخماسية، يمكننا تحديد قواعد إحداثيات كل قمة. هناك شيء واحد يجب ملاحظته هنا: في اللوحة، اتجاه المحور Y نحو الأسفل.
الكود المقابل هو كما يلي:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); // تعيين إحداثيات الرأس وصياغة مسار بناءً على الرأس for (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context. ClosePath(); // تعيين نمط الحدود ولون التعبئة context.lineWidth=3; context.fillStyle = #F6F152; context.strokeStyle = #F5270B context.fill();التأثير النهائي:
خصائص الخطبالإضافة إلى سمة lineWidth المستخدمة أعلاه، تحتوي الخطوط أيضًا على السمات التالية:
تقوم خاصية lineCap بتعيين أو إرجاع نمط رأس السطر في نهاية السطر، ويمكن أن تأخذ القيم التالية:
تقوم الخاصية lineJoin بتعيين أو إرجاع نوع الزاوية التي تم إنشاؤها عند التقاء سطرين، ويمكن أن تأخذ القيم التالية:
تقوم الخاصية miterLimit بتعيين أو إرجاع الحد الأقصى لطول ميتري (الافتراضي هو 10). يشير طول الميتري إلى المسافة بين الزوايا الداخلية والخارجية حيث يلتقي الخطان. يكون miterLimit صالحًا فقط عندما تكون سمة lineJoin هي miter.
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // اختبار خاصية lineCap // تعيين خط الأساس للمراقبة السهلة context.moveTo(10,10); .moveTo(200,10); context.lineTo(200,200); context.beginPath(); context.moveTo(10,50); context.lineTo(200,50); context.lineWidth=10; context.moveTo(10,100); context.lineTo(200,100); context.stroke(); //square context.beginPath(); context.moveTo(10,150); context.lineCap=square; context.lineWidth=10; خاصية linJoin //miter context.beginPath(); context.moveTo(300,50); context.lineTo(300,150); context.lineJoin=miter; context.lineWidth=10; //round context.beginPath(); context.moveTo(400,50); context.lineTo(400,150); context.lineJoin=round; context.lineWidth=10; context.beginPath(); context.moveTo(500,50); context.lineTo(650,100); context.lineJoin=bevel; context.stroke(); سمة miterLimit context.beginPath(); context.moveTo(700,50); context.lineTo(850,100); context.lineTo(700,150); context.miterLimit=2; context.strokeStyle=#2913EC;
تأثيرات القيم المختلفة لكل سمة هي كما يلي:
ملء النمطبالإضافة إلى تحديد اللون، يمكن أيضًا لنمط التعبئة ونمط السكتة الدماغية المُستخدمين سابقًا تعيين أنماط تعبئة أخرى. هنا نأخذ نمط التعبئة كمثال:
التدرج الخطيخطوات الاستخدام
(1) var grd = context.createLinearGradient( xstart , ystart, xend , yend ) ينشئ تدرجًا خطيًا ويحدد إحداثيات البداية والنهاية؛
(2) يضيف grd.addColorStop(stop, color) اللون إلى التدرج الخطي، وتكون قيمة التوقف 0~1؛
(3) سيتم تخصيص context.fillStyle=grd للسياق.
التدرج الشعاعيتشبه هذه الطريقة طريقة التدرج الخطي، إلا أن المعلمات التي تم تلقيها في الخطوة الأولى مختلفة.
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); يتلقى إحداثيات ونصف قطر مركز دائرة البداية وإحداثيات ونصف قطر مركز دائرة النهاية.
حشوة الصورة النقطيةcreatePattern (img , Repeat-style) مليء بالصور، ويمكن أن يكون نمط التكرار متكررًا أو متكررًا x أو متكررًا y أو غير متكرر.
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); // التدرج الخطي var grd = context.createLinearGradient(10, 10, 100, 350); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75,#2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; grd = context.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); // تعبئة الصورة النقطية var bgimg = new Image(); bgimg.onload= function (){ نمط فار = context.createPattern(bgimg, Repeat); context.strokeStyle=#F20B0B; context.fillRect(600, 100, 200,200); context.strokeRect(600, 100, 200,200 });التأثير هو كما يلي:
التحول الرسوميالترجمة: context.translate(x,y)، المعلمات المستلمة هي ترجمة الأصل بواسطة x في اتجاه المحور x وترجمة y في اتجاه المحور y.
القياس: context.scale(x,y)، المعلمات المستلمة هي أن محور الإحداثي x يتم قياسه وفقًا لنسبة x، ويتم قياس محور الإحداثي y وفقًا لنسبة y.
الدوران: context.rotate(angle)، المعلمة المستلمة هي زاوية دوران محور الإحداثيات.
تجدر الإشارة إلى أنه بعد تغيير الرسومات، سيتبع الرسم التالي الحالة السابقة، لذلك إذا كنت بحاجة إلى العودة إلى الحالة الأولية، فأنت بحاجة إلى استخدام context.save(); و context.restore(); الحالة الحالية:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); //translate() context.save(); (0,0,200,200); context.restore(); //scale() context.save(); #F5270B; context.scale(0.5,0.5); context.fillRect(500,50,200,200); //rotate() context.save(); .PI / 4); context.fillRect(300,10,200,200);
التأثير هو كما يلي:
شيء آخر متعلق بتحويل الرسومات هو: تحويل المصفوفة: context.transform(a, b, c, d, e, f, g). معنى المعلمات هو كما يلي:
القياس الأفقي (الافتراضي 1)
ب الميل الأفقي (الافتراضي 0)
ج الميل الرأسي (الافتراضي 0)
د القياس الرأسي (الافتراضي 1)
الإزاحة الأفقية (الافتراضي هو 0)
f الإزاحة العمودية (الافتراضي هو 0)
يمكن للقراء التحقق من تأثيرات كل معلمة بأنفسهم، ولن أعرضها واحدة تلو الأخرى هنا.
رسم منحنىهناك أربع وظائف لرسم المنحنيات، وهي:
context.arc(x,y,r,sAngle,eAngle,counterclockwise) يستخدم لإنشاء أقواس/منحنيات (يستخدم لإنشاء دوائر أو دوائر جزئية). معنى المعلمات المستلمة:
|. المعنى |
|.:--- |:---|
| س |. إحداثي مركز الدائرة |
|y|Y إحداثي مركز الدائرة|
|r|نصف قطر الدائرة|
|sAngle|زاوية البداية بالراديان (موضع الساعة الثالثة لدائرة القوس هو 0 درجة)|
|eAngle|زاوية النهاية بالراديان|
|عكس اتجاه عقارب الساعة|اختياري. يحدد ما إذا كان ينبغي رسم المؤامرة عكس اتجاه عقارب الساعة أو في اتجاه عقارب الساعة. خطأ = في اتجاه عقارب الساعة، صحيح = عكس اتجاه عقارب الساعة |
فيما يلي بعض الأمثلة على العديد من وظائف arc():
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.strokeStyle = #F22D0D; context.lineWidth = 2; // ارسم دائرة context.beginPath(); 40 ,0,2*Math.PI); context.stroke(); // ارسم نصف دائرة context.beginPath(); context.arc(200,100,40,0,Math.PI); context.stroke(); // ارسم نصف دائرة بعكس اتجاه عقارب الساعة context.beginPath(); ; context.stroke(); // ارسم نصف دائرة مغلقة context.beginPath(); context.arc(400,100,40,0,Math.PI); context. ClosePath();
التأثير هو كما يلي:
context.arcTo(x1,y1,x2,y2,r); ينشئ قوسًا/منحنى على اللوحة القماشية بين مماسين. معنى المعلمات المستلمة:
| المعلمة | معنى |
|---|---|
| ×1 | الإحداثي x لنقطة التحكم في القوس |
| y1 | الإحداثي y لنقطة التحكم في القوس |
| ×2 | الإحداثي x لنقطة نهاية القوس |
| y2 | الإحداثي y لنقطة نهاية القوس |
| ص | نصف قطر القوس |
ما يجب ملاحظته هنا هو أن نقطة البداية للمنحنى المرسوم بواسطة الدالة arcTo يجب تعيينها من خلال الدالة moveTo(). يتم استخدام الدالة arcTo أدناه لرسم مستطيل مستدير الزوايا:
function createRoundRect(context, x1, y1, width, height, radius) { // انتقل إلى الزاوية اليسرى العليا context.moveTo(x1 + radius, y1); // أضف مقطعًا خطيًا متصلاً بالزاوية اليمنى العليا context.lineTo (x1 + width - radius, y1); // أضف قوسًا context.arcTo(x1 + width, y1, x1 + width, y1 + radius, radius); // أضف مقطعًا خطيًا متصلاً بالزاوية اليمنى السفلية context.lineTo(x1 + width, y1 + height - radius); // أضف قوسًا context.arcTo(x1 + width, y1 + height, x1 + width - radius, y1 + height , radius); // أضف قطعة خطية متصلة بالزاوية السفلية اليسرى context.lineTo(x1 + radius, y1 + height); أضف قوسًا context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius); // أضف مقطعًا خطيًا متصلاً بالزاوية اليسرى العليا context.lineTo(x1, y1 + radius); قوس قوس context.arcTo(x1, y1, x1 + radius, y1, radius); احصل على كائن DOM المطابق لعنصر قماش var Canvas = document.getElementById('mc'); // احصل على كائن CanvasRenderingContext2D المرسوم على قماش var context = Canvas.getContext('2d'); StrokeStyle = #F9230B createRoundRect(context, 30, 30, 400, 200, 50);التأثير هو كما يلي:
context.quadraticCurveTo(cpx,cpy,x,y); ارسم منحنى بيزييه من الدرجة الثانية معاني المعلمات هي كما يلي:
| المعلمة | معنى |
|---|---|
| cpx | الإحداثي x لنقطة التحكم Bezier |
| cpy | الإحداثي y لنقطة التحكم Bezier |
| س | إحداثيات x لنقطة النهاية |
| ذ | y إحداثي نقطة النهاية |
نقطة بداية المنحنى هي النقطة الأخيرة في المسار الحالي. إذا لم يكن المسار موجودًا، فاستخدم التابعين beginPath() وmoveTo() لتحديد نقطة البداية.
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); ارسم منحنى Bezier المكعب بالمعلمات التالية:
| المعلمة | معنى |
|---|---|
| cp1x | إحداثيات x لنقطة التحكم Bezier الأولى |
| cp1y | الإحداثي y لنقطة التحكم Bezier الأولى |
| cp2x | إحداثيات x لنقطة التحكم Bezier الثانية |
| cp2y | الإحداثي y لنقطة التحكم Bezier الثانية |
| س | إحداثيات x لنقطة النهاية |
| ذ | y إحداثي نقطة النهاية |
هناك بشكل أساسي ثلاث خصائص وثلاث طرق تتعلق بعرض النص:
| ملكية | يصف |
|---|---|
| الخط | يقوم بتعيين أو إرجاع خصائص الخط الحالية لمحتوى النص |
| textAlign | يقوم بتعيين أو إرجاع المحاذاة الحالية لمحتوى النص |
| textBaseline | يقوم بتعيين أو إرجاع الخط الأساسي للنص الحالي المستخدم عند رسم النص |
| طريقة | يصف |
|---|---|
| نص التعبئة () | رسم النص المملوء على القماش |
| نص السكتة الدماغية () | رسم النص على القماش (بدون حشوة) |
| قياس النص () | إرجاع كائن يحتوي على عرض النص المحدد |
الاستخدام الأساسي للخصائص والأساليب المذكورة أعلاه هو كما يلي:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.font=bold 30px Arial; // تعيين النمط context.strokeStyle = #1712F4; 30,100); context.font=bold 50px Arial; var grd = context.createLinearGradient( 30 , 200, 400, 300 );// تعيين نمط التعبئة المتدرجة grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); ، #2F0AF1)؛ grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(مرحبًا بك في مدونتي!,30,200); context.moveTo(200,280); .stroke(); context.font=bold 20px Arial; context.fillStyle = #F80707; context.textAlign=left; context.fillText(يبدأ النص في الموضع المحدد, 200,300); context.textAlign=center; context.fillText(يتم وضع منتصف النص في الموضع المحدد, 200,350); .textAlign= right; context.fillText(ينتهي النص في الموضع المحدد, 200, 400); context.moveTo(10,500); context.lineTo(500,500); context.fillStyle=#F60D0D; context.font=bold 20px Arial; 10,500); context.textBaseline=bottom; context.fillText (الموضع المحدد أدناه، 150,500)؛ context.textBaseline=middle; context.fillText (الموضع المحدد في المنتصف, 300,500); context.font=bold 40px Arial; #16F643; var text = مرحبًا بك في مدونتي! context.strokeText(مرحبًا بك في مدونتي!,10,600); context.strokeText(عرض السلسلة أعلاه هو: +context.measureText(text).width,10,650);
التأثير هو كما يلي:
خصائص وطرق أخرى رسم الظل:دعونا نضيف ظلاً للنجمة الخماسية التي رسمناها سابقًا
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); // تعيين إحداثيات الرأس وصياغة مسار بناءً على الرأس for (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200 } context. ClosePath(); // تعيين نمط الحدود ولون التعبئة context.lineWidth=3; context.fillStyle = #F6F152; context.strokeStyle = #F5270B; context.shadowColor = #F7F2B4; ShadowOffsetY = 30; context.shadowBlur = 2; context.fill();التأثير هو كما يلي:
مزيج الرسم:globalAlpha: يقوم بتعيين أو إرجاع قيمة ألفا أو قيمة الشفافية الحالية للرسم
تهدف هذه الطريقة بشكل أساسي إلى ضبط شفافية الرسومات، والتي لن يتم تقديمها بالتفصيل هنا.
globalCompositeOperation: يقوم بتعيين أو إرجاع كيفية رسم الصورة الجديدة على الصورة الموجودة. تحتوي هذه الطريقة على قيم السمات التالية:
| قيمة | يصف |
|---|---|
| المصدر انتهى | عرض الصورة المصدر على الصورة المستهدفة (افتراضي) |
| مصدر فوق | يعرض الصورة المصدر أعلى الصورة الوجهة. أجزاء الصورة المصدر التي تقع خارج الصورة المستهدفة تكون غير مرئية |
| مصدر في | عرض الصورة المصدر داخل الصورة المستهدفة. سيتم عرض جزء الصورة المصدر الموجود داخل الصورة الوجهة فقط؛ وتكون الصورة الوجهة شفافة |
| مصدر الخروج | يعرض الصورة المصدر بالإضافة إلى الصورة المستهدفة. يتم عرض جزء الصورة المصدر فقط الموجود خارج الصورة الوجهة، وتكون الصورة الوجهة شفافة |
| الوجهة أكثر | عرض الصورة المستهدفة على الصورة المصدر |
| الوجهة على القمة | يعرض الصورة الوجهة أعلى الصورة المصدر. أجزاء الصورة المستهدفة التي تقع خارج الصورة المصدر غير مرئية |
| الوجهة في | يعرض الصورة الوجهة داخل الصورة المصدر. سيتم عرض جزء الصورة المستهدفة داخل الصورة المصدر فقط، وتكون الصورة المصدر شفافة |
| الوجهة خارج | يعرض الصورة المستهدفة بالإضافة إلى الصورة المصدر. سيتم عرض جزء الصورة المستهدفة الموجود خارج الصورة المصدر فقط، وتكون الصورة المصدر شفافة |
| أخف وزنا | عرض الصورة المصدر + الصورة المستهدفة |
| ينسخ | إظهار الصورة المصدر. تجاهل الصورة المستهدفة |
| xor | دمج الصور المصدر والوجهة باستخدام عملية XOR |
فيما يلي مثال صغير لكيفية تغيير المجموعة بنقرة واحدة:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>مجموعة الرسوم</title> <style type=text/css> #canvas{ border: 1px Solid #1C0EFA العرض : كتلة؛ الهامش: 20 بكسل تلقائي؛ } #buttons{ العرض: 1000 بكسل؛ حجم الخط: 18 بكسل؛ العرض: كتلة؛ تعويم: اليسار؛ الهامش الأيسر: 20 بكسل؛ } </style></head><body> <canvas id=canvas width=1000 height=800> متصفحك غير مدعوم بعد قماش </canvas> <div id=buttons> <a href=#>source-over</a> <a href=#>source-atop</a> <a href=#>المصدر الداخلي</a> <a href=#>المصدر الخارجي</a> <a href=#>الوجهة-فوق</a> <a href=#>الوجهة-فوق</a> <a href=#>الوجهة داخل</a> <a href=#>الوجهة خارجًا</a> <a href=#>أفتح</a> <a href=#>نسخ</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ draw(source-over); var Buttons = document.getElementById(buttons). getElementsByTagName(a); for (var i = 0; i < Buttons.length; i++) { Buttons[i].onclick = function(){ draw(this.text }; }}; function draw(compositeStyle){ var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.clearRect(0, 0, Canvas.width, Canvas.height); context.font = 40px Arial; context.textAlign = center; context.textBasedline = middle; context.fillText(globalCompositeOperation = +compositeStyle, Canvas.width/2, 60); // ارسم سياق المثلث. globalCompositeOperation = CompositeStyle; context.fillStyle = #1611F5; context.beginPath(); context.moveTo(700, 250); context.lineTo(1000,750); context.lineTo(400, 750); context.fill(); </html>يمكن للقراء النقر على الملصق لملاحظة تأثيرات المجموعة المختلفة، وتكون التأثيرات كما يلي:
منطقة القطع:تقوم طريقة clip() بقطع أي شكل وحجم من اللوحة القماشية الأصلية.
تلميح: بمجرد قيامك بقص منطقة ما، فإن كل الرسم اللاحق يقتصر على المنطقة المقطوعة (لا يمكن الوصول إلى مناطق أخرى على اللوحة القماشية). يمكنك أيضًا حفظ منطقة اللوحة القماشية الحالية باستخدام طريقة save() قبل استخدام طريقة clip() واستعادتها في أي وقت في المستقبل (عبر طريقة Restore())
فيما يلي مثال لاستخدام دائرة لقطع مستطيل:
var Canvas = document.getElementById(canvas); var context = Canvas.getContext(2d); context.beginPath(); context.fillStyle = #0C0101; context.beginPath(); context.fillStyle = #FFFDFD; context.arc(400,400,100,0,2*Math.PI); context.clip(); context.beginPath(); context.fillStyle = #F60825; 50)؛
بالإضافة إلى السمات والأساليب المذكورة أعلاه، هناك أيضًا الطرق التالية:
drawImage(): يرسم صورة أو لوحة قماشية أو فيديو على اللوحة القماشية.
toDataURL(): حفظ الرسومات
isPointInPath(): يُرجع صحيحًا إذا كانت النقطة المحددة في المسار الحالي، ويُرجع خطأ إذا كانت خلاف ذلك.
ولن أعطي أمثلة واحدة تلو الأخرى هنا.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.