ก่อนที่เราจะเริ่มต้น เราต้องรู้ว่าผ้าใบวาดภาพอย่างไร องค์ประกอบผ้าใบ HTML5 ใช้ JavaScript เพื่อวาดภาพ 2D บนหน้าเว็บ บนผืนผ้าใบของพื้นที่สี่เหลี่ยม ควบคุมแต่ละพิกเซล และใช้ JavaScript เพื่อวาดกราฟิก 2D และเรนเดอร์ทีละพิกเซล มีหลายวิธีในการใช้องค์ประกอบ Canvas เพื่อวาดเส้นทาง สี่เหลี่ยม วงกลม ตัวอักษร และเพิ่มรูปภาพ
* สังเกต! - - แท็ก canvas เองไม่มีฟังก์ชันการวาดภาพและสามารถใช้ JavaScript เพื่อวาดภาพบนหน้าเว็บเท่านั้น
การเรนเดอร์มีดังนี้:
1. เริ่มต้นโค้ด js
// การเริ่มต้น (ฟังก์ชั่น () { var canvas = document.createElement ('canvas'); document.body.appendChild (canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext ('2d' ); DrawPolygon (mCtx); // วาดรูปหลายเหลี่ยม (mCtx); // เส้นยอดวาด (mCtx); วาดข้อความ DrawRegion(mCtx); // วาดข้อมูล DrawCircle(mCtx); // วาดจุดข้อมูล})();ในโค้ดข้างต้น การตั้งค่าทั้งหมดจะเริ่มต้นได้ผ่านฟังก์ชันดำเนินการทันที สำหรับวิธีการวาดรูปหกเหลี่ยมปกติบนผืนผ้าใบ โปรดดูที่การวาดรูปหกเหลี่ยมปกติบนผืนผ้าใบ
ในแผนภาพสไปเดอร์ เราสามารถแยกมันออกแล้ววาดรูปหกเหลี่ยม เส้นตรง และวงกลมให้เป็นส่วนประกอบแต่ละส่วนที่สมบูรณ์ จากนั้นจึงเรียกและวาดพวกมันให้สม่ำเสมอผ่านวิธีการต่างๆ
ซอร์สโค้ดแสดงอยู่ด้านล่าง:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>แคนวาสแผนภูมิแมงมุม</title> <style type=text/css> แคนวาส{ } </style></head <body><script type=text/javascript> var mW = 400; var mH = 400; var mData = [['มานา', 77],['การป้องกัน', 72],['สุขภาพ', 46],['ความเสียหายทางกายภาพ', 50],['ค่าการกู้คืน', 80],['ความอดทน', 60]]; var mCount = mData.length; var mCenter = mW /2; // จุดศูนย์กลาง var mRadius = mCenter - 100; // Radius (ค่าที่ลบออกใช้เพื่อเว้นช่องว่างสำหรับข้อความที่วาด) var mAngle = Math.PI * 2 / mCount; //Angle var mCtx = null; var mColorPolygon = '#B8B8B8'; // การเริ่มต้น (ฟังก์ชั่น) { var canvas = document.createElement('canvas'); document.body.appendChild(ผ้าใบ); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d'); DrawPolygon(mCtx); (); // ฟังก์ชันวาดรูปหลายเหลี่ยมขอบ DrawPolygon(ctx){ ctx.save(); // บันทึกสถานะเริ่มต้น ctx. strokeStyle = mColorPolygon; var = mRadius/ mCount; // รัศมีหน่วย// วาดวงกลม 6 วงสำหรับ (var i = 0; i < mCount; i ++) { ctx.beginPath(); // เริ่มต้นเส้นทาง var currR = r * ( i + 1); // รัศมีปัจจุบัน // วาด 6 ขอบสำหรับ (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.closePath(); // ปิดเส้นทาง ctx. stroke( } ctx.restore(); // คืนค่าเป็นสถานะเริ่มต้น } // ฟังก์ชันการเชื่อมต่อ Vertex (ctx) { ctx.save(); ctx. strokeStyle = mColorLines; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); var y = mCenter + mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y); } ctx.restore(); } //วาดฟังก์ชันข้อความ ctx){ ctx.save(); var fontSize = mCenter / 12; ctx.font = FontSize + 'px 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 } อื่น ๆ ถ้า (mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]) .width, y); } อื่น ๆ {ctx.fillText(mData[i][0], x, y); } } ctx.restore(); } // วาดฟังก์ชันขอบเขตข้อมูล 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.closePath(); ctx.restore(); } // ฟังก์ชันวาดจุด DrawCircle(ctx){ ctx.save(); var r = mCenter / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i] / 100; mRadius * Math.sin(mAngle * i) * mData[i] / 100; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; </สคริปต์></ร่างกาย></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network