قبل أن نبدأ، نحتاج إلى معرفة كيفية رسم اللوحة القماشية للصور. يتم استخدام عنصر اللوحة القماشية لرسم الرسومات على صفحات الويب. يستخدم عنصر قماش HTML5 JavaScript لرسم صور ثنائية الأبعاد على صفحة الويب. على لوحة المنطقة المستطيلة، تحكم في كل بكسل واستخدم JavaScript لرسم رسومات ثنائية الأبعاد وعرضها بكسل تلو الآخر. هناك العديد من الطرق لاستخدام عنصر اللوحة القماشية لرسم المسارات والمستطيلات والدوائر والأحرف وإضافة الصور.
* يلاحظ! ! ! لا تحتوي علامة اللوحة نفسها على وظيفة الرسم ويمكنها فقط استخدام JavaScript لرسم الصور على صفحة الويب.
التقديم هو كما يلي:
1. تهيئة كود js
//Initialization(function(){ var Canvas = document.createElement('canvas'); document.body.appendChild(canvas); Canvas.height = mH; Canvas.width = mW; mCtx = Canvas.getContext('2d' drawPolygon(mCtx); // رسم حواف المضلع drawLines(mCtx); رسم النص drawRegion(mCtx); // رسم البيانات drawCircle(mCtx);في الكود أعلاه، تتم تهيئة جميع الإعدادات من خلال وظيفة التنفيذ الفوري. لمعرفة كيفية رسم شكل سداسي منتظم على القماش، يرجى الرجوع إلى رسم مسدس عادي على القماش
في المخطط العنكبوتي، يمكننا تقسيمه ورسم الأشكال السداسية والخطوط المستقيمة والدوائر إلى مكونات فردية كاملة، ثم استدعائها ورسمها بشكل موحد من خلال الطرق.
يظهر كود المصدر أدناه:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>لوحة الرسم البياني العنكبوتية</title> <style type=text/css> Canvas{ } </style></head ><body><script type=text/javascript> var mW = 400; var mH = 400; var mData = [['Mana', 77],['Defense', 72],['الصحة', 46],['الأضرار المادية', 50],['قيمة الاسترداد', 80],['التحمل', 60]]; var mCount = mData. length; var mCenter = mW /2; // النقطة المركزية var mRadius = mCenter - 100; // نصف القطر (يتم استخدام القيمة المطروحة لترك مساحة للنص المرسوم) var mAngle = Math.PI * 2 / mCount //Angle var mCtx = null; var mColorPolygon = '#B8B8B8'; // لون المضلع var mColorLines = '#B8B8B8'; // لون اتصال Vertex var mColorText = '#000000'; { var Canvas = document.createElement('canvas'); document.body.appendChild(canvas); drawLines(mCtx); drawText(mCtx); (); // رسم حواف المضلع وظيفة drawPolygon(ctx){ ctx.save(); // حفظ الحالة الافتراضية ctx.strokeStyle = mColorPolygon; var r = mRadius/ mCount; // نصف القطر // ارسم 6 دوائر for(var i = 0; i < mCount; i ++) { ctx.beginPath(); // ابدأ المسار var currR = r * ( i + 1); // نصف القطر الحالي // ارسم 6 حواف for(var j = 0; j < mCount; j ++) { var x = mCenter + currR * Math.cos(mAngle * j); var y = mCenter + currR * Math.sin(mAngle * j); console.log('x:' + x, 'y :' + y); ctx.lineTo(x, y); ctx.restore(); // استعادة الحالة الافتراضية } // وظيفة اتصال Vertex drawLines(ctx){ ctx.beginPath(); ctx.strokeStyle = mColorLines for(var i = 0; < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y); ctx){ ctx.save(); var FontSize = mCenter / 12; Microsoft Yahei'; ctx.fillStyle = mColorText; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); .sin(mAngle * i); if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){ ctx.fillText(mData[i][0], x, y + FontSize }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){ ctx.fillText(mData[i) ][0], x - ctx.measureText(mData[i][0]).width, y + FontSize }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]) .width, y); }else{ ctx.fillText(mData[i][0], x, y); } // رسم منطقة البيانات function drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos (mAngle * i) * mData[i][1] / 100 var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y); ctx.إغلاق المسار(); ctx.restore(); } // رسم النقطة function drawCircle(ctx){ ctx.save(); / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; mRadius * Math.sin(mAngle * i) * mData[i][1] / ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0.8)'; ctx.fill(); </script></body></html>ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.