Прежде чем мы начнем, нам нужно знать, как холст рисует изображения. Элемент холст используется для рисования графики на веб-страницах. Элемент холста HTML5 использует JavaScript для рисования 2D-изображений на веб-странице. На холсте прямоугольной области управляйте каждым пикселем и используйте JavaScript для рисования 2D-графики и ее рендеринга попиксельно. Существует множество способов использовать элемент холста для рисования контуров, прямоугольников, кругов, символов и добавления изображений.
* Уведомление! ! ! Сам тег 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); // Рисуем края полигона drawLines(mCtx); // Линии вершин drawText(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; [['Mana', 77],['Defense', 72],['Health', 46],['Физический урон', 50],['Восстановительное значение', 80],['Выносливость', 60]]; var mCount = mData.length; //Количество ребер; var mCenter = mW /2; //Центральная точка var mRadius = mCenter - 100 //Радиус (вычитаемое значение используется, чтобы оставить место для рисуемого текста) var mAngle = Math.PI * 2 / mCount; // Угол var mCtx = null; var mColorPolygon = '# B8B8B8'; // Цвет полигона var mColorLines = '# B8B8B8'; // Цвет соединения вершин var mColorText = '#000000'; { var Canvas = document.createElement('canvas'); document.body.appendChild(canvas); Canvas.height = mW; mCtx = Canvas.getContext('2d'); drawPolygon(mCtx); drawText(mCtx); drawRegion(mCtx); (); // Рисуем края многоугольника function drawPolygon(ctx){ ctx.save(); // сохраняем состояние по умолчанию ctx.strokeStyle = mColorPolygon; var r = mRadius/ mCount; //Единичный радиус//Нарисуем 6 кругов for(var i = 0; i < mCount; i ++) { ctx.beginPath(); //Начальный путь var currR * ( 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); :' + y); ctx.lineTo(x, y); } ctx.closePath(); //Закрытый путь ctx.stroke(); ctx.restore(); // восстанавливаем состояние по умолчанию } // Функция соединения вершин drawLines(ctx){ ctx.beginPath(); ctx.strokeStyle = mColorLines; for(var i = 0; i < mCount; я ++) { var x = mCenter + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y); } ctx.stroke(); ctx.restore(); //Рисование текста функцией drawText( ctx) { ctx.save(); вар 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); } } ctx.restore(); } //Рисуем область данных function drawRegion(ctx){ ctx.save(); 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.fillStyle = 'rgba(255, 0, 0, 0.5)'; 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]/100; ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'; ctx.fill(); </script></body></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.