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

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> 


本文原地址:http://www.sitejs.cn/sitejs-12752-1.html


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值