All geek questions in one place

How to create a multicolor circle in html and css

I want to create a circle that is divided into 6 sectors based on some values, the angle of the sector depends on some parameter. The larger the value of the parameter, the more radians of the circle.

What I understand can be built by creating a circle that has these 6 different parts, and then putting another div on top that creates this white ring as an effect. I know how to create a circle, but I can’t understand how to dynamically divide it into different colored sectors.

Is this possible with CSS, is there a solution using Javascript. Any help would be greatly appreciated.

circle

+4
source share
3 answers

Try something like this: http://html5.litten.com/graphing-data-in-the-html5-canvas-element-part-iv-simple-pie-charts/

It should be noted that I once found that using google to find this question / answer: HTML5 canvas pie chart

+1
source

HTML5 Canvas is the way to go. Here are some links to find out:

W3C Specification

Kinetic.js

+2
source 
<!DOCTYPE html> <html> <head> </head> <body> <canvas id="first" width="300" height="300" style="border:1px solid #000;">Your browser does not support the HTML5 canvas tag </canvas> <p> <select name="shapes" id="shapes"> <option value="Square">Square</option> <option value="Circle">Circle</option> </select> </p> <p> <select name="bkcolour" id="bkcolour"> <option>Red</option> <option>Black</option> </select> </p> <button onclick="drawshapes()">Try it</button> <script> function drawTenSquare() { for(var i=0; i<10; i++) { var x=45; var y=25; var canvas =document.getElementById("first"); var context=canvas.getContext("2d"); context.fillStyle="#FF0000"; context.fillRect(x+(i*15),y+(i*5),10,10); } } function drawTenCircle() { for(var i=0; i<10; i++) { var canvas=document.getElementById("first"); var context=canvas.getContext("2d"); context.beginPath(); context.arc(95+(i*5),50+(i*2),40,0,2*Math.PI); context.stroke(); } } function drawshapes() { var shape = document.getElementById("shapes") var index = shape.selectedIndex; var valindex = shape[index].value; if(valindex == "Square") { drawTenSquare(); } else if(valindex == "Circle") { drawTenCircle(); } } </script> </body> </html>
+1
source

Source: https://habr.com/ru/post/1479169/

More articles:


All Articles