Antes de começarmos, precisamos saber como o canvas desenha imagens. O elemento canvas é usado para desenhar gráficos em páginas da web. O elemento canvas HTML5 usa JavaScript para desenhar imagens 2D na página da web. Na tela da área retangular, controle cada pixel e use JavaScript para desenhar gráficos 2D e renderizá-los pixel por pixel. Há muitas maneiras de usar o elemento canvas para desenhar caminhos, retângulos, círculos, caracteres e adicionar imagens.
* Perceber! ! ! A tag canvas em si não possui a função de desenho e só pode usar JavaScript para desenhar imagens na página web.
A renderização é a seguinte:
1. Inicialize o código js
//Inicialização(função(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d' ); drawPolygon(mCtx); // Desenha arestas do polígono drawLines(mCtx); Desenhar texto drawRegion(mCtx); // Desenhar dados drawCircle(mCtx); // Desenhar pontos de dados})();No código acima, todas as configurações são inicializadas por meio de uma função de execução imediata. Para saber como desenhar um hexágono regular na tela, consulte Desenhando um hexágono regular na tela.
No diagrama de aranha, podemos dividi-lo e desenhar hexágonos, linhas retas e círculos em componentes individuais completos e, em seguida, chamá-los e desenhá-los uniformemente por meio de métodos.
O código fonte é mostrado abaixo:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Tela do gráfico aranha</title> <style type=text/css> tela{ } </style></head ><body><script type=text/javascript> var mW = 400; 72],['Saúde', 46],['Dano físico', 50],['Valor de recuperação', 80],['Resistência', 60]]; var mCenter = mW /2; //Ponto central var mRadius = mCenter - 100; //Raio (o valor subtraído é usado para deixar espaço para o texto desenhado) var mAngle = Math.PI * 2 / mCount; //Ângulo var mCtx = null; var mColorPolygon = '#B8B8B8'; //Cor do polígono var mColorLines = '#B8B8B8'; { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mCtx = canvas.getContext('2d'); (); // Desenha arestas de polígono function drawPolygon(ctx){ ctx.save(); // salva o estado padrão ctx.strokeStyle = mColorPolygon; var r = mRadius/ mCount; ctx.beginPath(); //Caminho inicial var currR = r * (i + 1); j ++) { var x = mCenter + currR * Math.cos(mAngle * j); :' + y); ctx.lineTo(x, y } ctx.closePath(); ctx.restore(); // restaura para o estado padrão } //Função de conexão do vértice drawLines(ctx){ ctx.save(); < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx){ ctx.save(); var fontSize = mCenter / 12; Microsoft Yahei'; .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]) .largura, y); }else{ ctx.fillText(mData[i][0], x, y); } //Desenhar função de região de dados drawRegion(ctx){ ctx.save(); ctx.beginPath(); (mAngle * i) * mData[i][1] / 100; * mData[i][1] / 100; ctx.restore(); //Desenhar função de ponto 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)'; </script></body></html>O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.