UDN-企业互联网技术人气社区

板块导航

浏览  : 1042
回复  : 1

[HTML5] HTML5之Canvas标签的应用-绘制圆形

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-11 00:44:29 | 显示全部楼层 |阅读模式
    绘制圆形的步骤:

    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.                                 content.fillStyle = "#eeeeff";//填充canvas的背景颜色
  12.                                 content.fillRect(0, 0, 500, 400);//参数分别表示 x轴,y轴,宽度,高度
  13.                                 for(var i = 0; i < 10; i++)//可以不使用循环,在这里使用循环主要是为了多绘制几个图形,循环与我们绘制圆形没有任何关系
  14.                                 {
  15.                                         content.beginPath();//创建路径
  16.                                         content.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);//绘制图形
  17.                                         content.closePath();//关闭路径
  18.                                         content.fillStyle = "rgba(255, 0, 0, 0.25)";//设置样式
  19.                                         content.fill();//填充
  20.                                 }
  21.                                                         
  22.                         }
  23.                                        
  24.                         var $ =
  25.                         {
  26.                                 getId:function(_id)
  27.                                 {
  28.                                         return document.getElementById(_id);
  29.                                 }
  30.                         }
  31.         </script>
  32.     </head>
  33.    
  34.     <body>
  35.             <canvas id="W3Cfuns_canvas" width="500" height="400"></canvas>
  36.     </body>
  37. </html>
复制代码






拓展阅读:



相关帖子

发表于 2015-9-17 15:23:55 | 显示全部楼层
不错的帖子,支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部