HTML5教程实例-用Canvas标签绘制圆形

如果想要绘制一个圆形是不是还跟矩形一样呢?

绘制圆形的步骤:

1、开始创建路径

首先使用图形上下文对象的beginPath()方法。

2、创建圆形路径

创建圆形路径时,需要使用圆形上下文对象的arc()方法。

arc(x, y, radius, startAngle, endAngle, anticlockwise);

x:表示起点横坐标

y:表示起点纵坐标

radius:表示圆形半径

startAngle:表示开始角度

endAngle:表示结束角度

anticlockwise:表示是否按照顺时针绘制,boolean类型

3、关闭路径

当创建完路径后,要使用图形上下文对象的closePath()方法将路径关闭。

4、绘制图形样式

这个我想就不用多说了。

  1. <!DOCTYPE HTML> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
  5.         <title>HTML5每日一练之Canvas标签的应用-绘制圆形</title> 
  6.         <script language="javascript" type="text/javascript"> 
  7.                         window.onload = function() 
  8.                         { 
  9.                                 var canvas = $.getId("W3Cfuns_canvas") 
  10.                                 var content = canvas.getContext("2d");//取得图形上下文 graphics context 
  11.  
  12.                                 content.fillStyle = "#eeeeff";//填充canvas的背景颜色 
  13.                                 content.fillRect(0, 0, 500, 400);//参数分别表示 x轴,y轴,宽度,高度 
  14.                                 for(var i = 0; i < 10; i++)//可以不使用循环,在这里使用循环主要是为了多绘制几个图形,循环与我们绘制圆形没有任何关系 
  15.                                 { 
  16.                                         content.beginPath();//创建路径 
  17.                                         content.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);//绘制图形 
  18.                                         content.closePath();//关闭路径 
  19.                                         content.fillStyle = "rgba(255, 0, 0, 0.25)";//设置样式 
  20.                                         content.fill();//填充 
  21.                                 } 
  22.                                                          
  23.                         } 
  24.                                          
  25.                         var $ = 
  26.                         { 
  27.                                 getId:function(_id) 
  28.                                 { 
  29.                                         return document.getElementById(_id); 
  30.                                 } 
  31.                         } 
  32.         </script> 
  33.     </head> 
  34.      
  35.     <body> 
  36.             <canvas id="W3Cfuns_canvas" width="500" height="400"></canvas> 
  37.     </body> 
  38. </html> 

转载请注明:代码家园 » HTML5教程实例-用Canvas标签绘制圆形

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)