Triângulo Textural para classificação do solo desenvolvido com o HTML Canvas. Ver demonstração.

Faça o download do projeto ou use pelo cdn.jsdelivr.net copiando um dos scripts abaixo:

<script src="https://cdn.jsdelivr.net/gh/netosep/textural-triangle-canvas/TexturalTriangleCanvas.js"></script>
// ou
<script src="https://cdn.jsdelivr.net/gh/netosep/textural-triangle-canvas/TexturalTriangleCanvas.min.js"></script>

Em seu HTML, crie sua tag canvas com um ID:

<canvas id="myCanvas" width="700" height="700"></canvas>

Em seu código JavaScript, use:

<script>
    // passando como parâmetro (string), o id do seu Canvas
    let myTriangle = new TexturalTriangleCanvas('myCanvas');
</script>

Para somente desenhar o triângulo sem os valores, use:

myTriangle.draw();
// ou diretamente
new TexturalTriangleCanvas('myCanvas').draw();

🖼 Preview:

Para desenhar com valores, use:

let siltPercent = 15;
let sandPercent = 60;
let clayPercent = 25;

triangle.drawWithValues(siltPercent, sandPercent, clayPercent);
// ou também diretamente
new TexturalTriangleCanvas('myCanvas').drawWithValues(siltPercent, sandPercent, clayPercent);

🖼 Preview:

Idiomas suportados: Inglês, Português Brasileiro e Espanhol (fique a vontade para utilizar o seu 😉).

myTriangle.setLanguage('pt-br'); // para usar o idioma português brasileiro (nativo)

Utilize também o método refresh() para aplicar alterações de texto na imagem do triângulo:

myTriangle.refresh();

Sinta-se à vontade para abrir issues e realizar pull requests. Contribuições são bem-vindas 😉.

MIT

Developed with 🖤 by Neto Sepulveda