如何在html和css中創建多色圓圈

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

看到這個畫布我猜它會幫助你設計或開發你的畫布。 – 2013-05-04 20:15:34

試過它在jsfiddle不工作，但確實給出了一個想法，謝謝 – Sachin 2013-05-05 07:09:11

如何在html和css中創建多色圓圈

回答

相關問題