Antes de comenzar, necesitamos saber cómo el lienzo dibuja imágenes. El elemento lienzo se utiliza para dibujar gráficos en páginas web. El elemento de lienzo HTML5 utiliza JavaScript para dibujar imágenes 2D en la página web. En el lienzo del área rectangular, controle cada píxel y use JavaScript para dibujar gráficos 2D y representarlos píxel por píxel. Hay muchas formas de utilizar el elemento lienzo para dibujar trazados, rectángulos, círculos, personajes y agregar imágenes.
* ¡Aviso! ! ! La etiqueta del lienzo en sí no tiene la función de dibujo y solo puede usar JavaScript para dibujar imágenes en la página web.
La representación es la siguiente:
1. Inicializar el código js
//Inicialización(función(){ var lienzo = document.createElement('canvas'); document.body.appendChild(canvas); lienzo.height = mH; lienzo.width = mW; mCtx = lienzo.getContext('2d' ); drawPolygon(mCtx); // Dibujar bordes de polígono drawLines(mCtx); // Líneas de vértice drawText(mCtx); Dibujar texto drawRegion(mCtx); // Dibujar datos drawCircle(mCtx); // Dibujar puntos de datos})();En el código anterior, todas las configuraciones se inicializan a través de una función de ejecución inmediata. Para saber cómo dibujar un hexágono regular en un lienzo, consulte Dibujar un hexágono regular en un lienzo.
En el diagrama de araña, podemos dividirlo y dibujar hexágonos, líneas rectas y círculos en componentes individuales completos, y luego llamarlos y dibujarlos uniformemente mediante métodos.
El código fuente se muestra a continuación:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Lienzo del gráfico de araña</title> <style type=text/css> lienzo{ } </style></head ><cuerpo><tipo de script=text/javascript> var mW = 400; var mH = 400; var mData = [['Mana', 77],['Defensa', 72],['Salud', 46],['Daño físico', 50],['Valor de recuperación', 80],['Resistencia', 60]]; var mCenter = mW /2; //Punto central var mRadius = mCenter - 100; //Radio (el valor restado se usa para dejar espacio para el texto dibujado) var mAngle = Math.PI * 2 / mCount; //Ángulo var mCtx = null; var mColorPolygon = '#B8B8B8'; //Color del polígono var mColorLines = '#B8B8B8'; //Color de conexión de vértice mColorText = '#000000'; { var lienzo = document.createElement('lienzo'); document.body.appendChild(lienzo); lienzo.altura = mH; lienzo.ancho = mW; dibujarTexto(mCtx); dibujarCircle(mCtx); (); // Dibujar bordes de polígono función drawPolygon(ctx){ ctx.save(); // guarda el estado predeterminado ctx.strokeStyle = mColorPolygon; var r = mRadius/ mCount; //Radio unitario//Dibuja 6 círculos for(var i = 0; i < mCount; i ++) { ctx.beginPath(); //Ruta inicial var currR = r * ( i + 1); //Radio actual //Dibuja 6 aristas 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(); //Ruta cerrada ctx.stroke(); ctx.restore(); // restaurar al estado predeterminado } //Función de conexión de vértice drawLines(ctx){ ctx.save(); ctx.strokeStyle = mColorLines; < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter); ctx.lineTo(x, y); } ctx.stroke(); ctx){ ctx.save(); var tamaño de fuente = 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]) .ancho, y); }else{ ctx.fillText(mData[i][0], x, y } } ctx.restore(); } // Dibujar región de datos función 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.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.restore(); } // Función de punto de dibujo drawCircle(ctx){ ctx.save(); / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / var y = mCenter + 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)'; </script></body></html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.