1. 首页
  2. 问答
  3. 如何在html和css中创建多色圆圈

如何在html和css中创建多色圆圈

2013-05-04 25 views
4

我想根据某些值创建一个分为6个扇区的圆，扇区的角度取决于某个参数。参数值越大，圆弧的弧度越大。如何在html和css中创建多色圆圈

我理解它的方式可以通过制作一个具有这6个不同部分的圆圈，然后在其上放置另一个div来创建，从而产生这种白色环状效果。我知道如何创建圈子，但无法理解如何动态地将其划分为不同的有色部分。

这甚至可能与CSS，是否存在使用Javascript的解决方案。任何帮助将深表谢意。

circle

来源

2013-05-04 Sachin

+1

CSS圆圈四点 - 小提琴：http://jsfiddle.net/tupCW/ ..我不过是;没有意识到有6个行业的任何CSS解决方案 – dotTutorials 2013-05-04 20:00:24

+0

这很可能是一个SVG库：http://raphaeljs.com/ – Blender 2013-05-04 20:03:20

+0

如果像你说的那样，将不会有任何CSS解决方案，依赖于某个参数'。我理解这个参数是相当可变的 - 没有办法去CSS。 – Kiruse 2013-05-04 20:03:38

回答

2

HTML5画布是必经之路走。这里有一些链接了解：

W3C Specification

Kinetic.js

来源

2013-05-04 20:04:16 tobspr

+0

我想Kinetic.js在这种情况下会是一个矫枉过正的问题，因为我想要一个非交互式和简单的图表。也许一旦我们使它更复杂，我们可以去Kinetic.js – Sachin 2013-05-05 07:22:32

+0

是的，这只是一个例子，你可以用帆布做什么..当然，你不需要一个类似的东西库.. – tobspr 2013-05-05 10:45:04

1 
<!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>

来源

2013-05-04 20:14:51

+0

看到这个画布我猜它会帮助你设计或开发你的画布。 – 2013-05-04 20:15:34

+0

试过它在jsfiddle不工作，但确实给出了一个想法，谢谢 – Sachin 2013-05-05 07:09:11

相关问题

 相关问题