JavaScript图形实例：圆形图案

三观不歪 發表於 2019-12-20 16:07:00

在HTML5的Canvas 2D API中，可以调用arc方法绘制圆或圆弧。该方法调用格式为：
              context . arc(x, y, radius, startAngle, endAngle, anticlockwise)
        其中：（x,y）为圆心坐标，radius为半径，startAngle和endAngle给定圆弧的开始角度和结束角度，anticlockwise给定方向，为布尔类型，规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
        例如，编写如下的HTML文件。
<!DOCTYPE html>
<html>
<head>
<title>笑脸</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.beginPath();
     context.arc(75,75,50,0,Math.PI*2,true);  // 圆脸
     context.moveTo(110,75);
     context.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
     context.moveTo(65,65);
     context.arc(60,65,5,0,Math.PI*2,true);  // 左眼
     context.moveTo(95,65);
     context.arc(90,65,5,0,Math.PI*2,true);  // 右眼
     context.stroke();
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="200" style="border:3px double #996633;"></canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出笑脸图案，如图1所示。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191220164114236-193029766.png">
图1  笑脸图案
        再例如，编写如下的HTML文件。
<!DOCTYPE html>
<head>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEFF";
     context.fillRect(0,0,400,300);
     context.lineWidth=2;
     for (var i=1;i<10;i++)
     {
        context.beginPath();
        context.arc(i*20,i*20,i*10,0,Math.PI*2,true);
        context.strokeStyle = 'rgb('+(25*i)+','+(255-25*i)+',255)';
        context.closePath();
        context.stroke();
     }
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出9个圆形沿直线从小到大抛出的图案，如图2所示。
 <img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191220164156869-155627222.png">
图2  沿直线从小到大抛出的9个圆
<h3>1．圆周上的圆图案</h3>
        在半径为60的圆周上取36个点作为圆心，绘制36个半径为60的圆。
        可编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>圆周上的圆</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEDD";
     context.fillRect(0,0,300,300);
     context.strokeStyle="blue";
     context.lineWidth=1;
     var dig=Math.PI/18;
     var radius=60;
     context.beginPath();
     for (var i=0;i<36;i++)
     {
        var x=radius*Math.cos(i*dig)+150;
        var y=radius*Math.sin(i*dig)+150;
        context.arc(x,y,radius,0,Math.PI*2,true);
    }
    context.closePath();
    context.stroke();
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆周上的圆图案，如图3所示。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191220160349982-1485068547.png"> 
图3  圆周上的圆图案
        上面绘制的圆的颜色全部采用蓝色，若颜色采用rgb函数计算，可以修改上述HTML文件如下：
<!DOCTYPE html>
<head>
<title>圆周上的圆（二）</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEDD";
     context.fillRect(0,0,300,300);
     context.strokeStyle="blue";
     context.lineWidth=1;
     var dig=Math.PI/20;
     var radius=70;
     for (var i=0;i<40;i++)
     {
        context.beginPath();
        var x=radius*Math.cos(i*dig)+150;
        var y=radius*Math.sin(i*dig)+150;
        context.arc(x,y,radius,0,Math.PI*2,true);
        context.strokeStyle = 'rgb('+(6.25*i)+','+(255-6.25*i)+',255)';
        context.closePath();
        context.stroke();
    }
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆周上的圆图案，如图4所示。
 <img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191220160423133-1493715906.png"> 
图4 圆周上的圆
<h3>2．圆的叠加</h3>
        随机选定40个圆心坐标，绘制50个半径为40的圆，并用给定颜色进行填充。可编写的HTML代码如下。
<html>
<head>
<title>圆的叠加</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     var context=canvas.getContext('2d');
     context.globalCompositeOperation = "lighter";
     context.fillStyle = "#ff6699";
     for(var i=0; i<50; i++)
     {
       context.beginPath();
       context.arc(Math.random()*400,Math.random()*400, 40, 0,Math.PI*2);
       context.closePath();
       context.fill();
     }
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;">
</canvas>
</body>
</html>
        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出圆的叠加图案，如图5所示。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191220160507990-759247179.png"> 
图5  圆的叠加图案
<h3>3．心脏形图案</h3>
       在半径为60的圆周上选取28个圆心坐标，根据当前圆心坐标的椭圆公式计算出半径，按计算的半径分别绘制28个圆。可编写的HTML代码如下。
<!DOCTYPE html>
<head>
<title>心脏形图案</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEFF";
     context.fillRect(0,0,400,400);
     context.strokeStyle="red";
     context.lineWidth=2;
     var r1=60;
     var y1=150-r1;
     var PI=3.1415926;
     context.beginPath();
     for(a=0;a<2*PI;a+=PI/27)
     {
           x=200+r1*Math.cos(a);
           y=150+r1*Math.sin(a);
           rs=Math.sqrt((x-200)*(x-200)+(y-y1)*(y-y1));
           context.beginPath();
           context.arc(x,y,rs,0,Math.PI*2,true);
          context.closePath();
          context.stroke();
     }
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出心脏形图案，如图6所示。
 <img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191220160550316-341428778.png"> 
图6 心脏形图案
<h3>4．肾形图案</h3>
        在半径为80的圆周上选取28个圆心坐标，将当前圆心坐标与画布中心位置的横向距离作为半径分别绘制28个圆。可编写的HTML代码如下。
<!DOCTYPE html>
<head>
<title>肾形图案</title>
<script type="text/javascript">
  function draw(id)
  {
     var canvas=document.getElementById(id);
     if (canvas==null)
        return false;
     var context=canvas.getContext('2d');
     context.fillStyle="#EEEEFF";
     context.fillRect(0,0,400,300);
     context.strokeStyle="red";
     context.lineWidth=2;
     var r1=80;
     var PI=3.1415926;
     for(a=0;a<=2*PI;a+=PI/27)
    {
           x=200+r1*Math.cos(a);
           y=150+r1*Math.sin(a);
        rs=Math.abs(x-200);
        context.beginPath();
           context.arc(x,y,rs,0,Math.PI*2,true);
        context.closePath();
        context.stroke();
     }      
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出肾形图案，如图7所示。
<img src="https://img2018.cnblogs.com/i-beta/1485495/201912/1485495-20191220160623609-309793028.png"> 
图7  肾形图案  
来源：https://www.cnblogs.com/cs-whut/p/12073656.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript图形实例：圆形图案