<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>SVG Draw Arc</title>

  <style media="screen">

    .svgs{display: flex; flex-flow:row wrap; justify-content: space-around; width: 620px; margin: 0 auto;}

    .svgs svg{width:300px; height:200px; background: #F2F2F2; margin-bottom: 10px;}

  </style>

</head>

<body>

  <div class="svgs">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />

    <path id="path1" d="" stroke="#000" fill="green" fill-opacity="1" />

  </svg>

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />

    <path id="path2" d="" stroke="#000" fill="green" fill-opacity="1" />

  </svg>

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />

    <path id="path3" d="" stroke="#000" fill="green" fill-opacity="1" />

  </svg>

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />

    <path id="path4" d="" stroke="#000" fill="green" fill-opacity="1" />

  </svg>

</div>

</body>

<script type="text/javascript">

  function changeArcDeg(path, d){

    path.setAttribute("d", d);

  }

  function drawArcByRadiusDeg(startX, startY, r, deg, clockwise) {

    var cw = typeof clockwise !== 'undefined' ? clockwise : 1;

    var x = startX - r + r*Math.cos(deg*Math.PI/180);

    var y = startY + (1===cw ? 1 : -1)*r*Math.sin(deg*Math.PI/180);

    var bigOrSmall = deg > 180 ? 1 : 0;

    var line = " L" + (startX - r) + " " + startY + " L"+startX + " " + startY + "Z";

    return "M " + startX +" "+ startY + " A "+ r +" " + r + " 0 " + bigOrSmall + " " +cw+ " " + x + " " + y + line;

  }

  function run(pid, deg, clockwise){

    var path = document.getElementById(pid);

    var x = 200, y = 100, r = 50, add = 0===deg ? true : false;

    setInterval(function(){

      if(deg>360) deg -= 360;

      if(deg<0) deg += 360;

      path.setAttribute("d", drawArcByRadiusDeg(x, y, r, add ? deg++ : deg--, clockwise)) ;

    }, 10);

  }

  window.onload = function(){

    run('path1', 0, 1);

    run('path2', 0, 0);

    run('path3', 360, 0);

    run('path4', 360, 1);

  };

</script>

</html>

svg绘制圆弧的更多相关文章

  1. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  2. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  3. wpf 后台绘制圆弧

    wpf 前台绘制圆弧很简单,如:<Path x:Name="path_data" Stroke="#FFE23838" StrokeThickness=& ...

  4. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  5. [原]Wpf应用Path路径绘制圆弧

    1. 移动指令:Move Command(M):M 起始点  或者:m 起始点比如:M 100,240或m 100,240使用大写M时,表示绝对值; 使用小写m时; 表示相对于前一点的值,如果前一点没 ...

  6. 调用gluNurbsCurve绘制圆弧

    <OpenGL编程指南>第12章第3小结专门介绍调用GLU绘制NURBS曲线或曲面,很可惜的是并未给出绘制圆弧的例子.网上可以找到很多绘制整个园的例子,却没圆弧例子,自己瞎折腾了2个礼拜, ...

  7. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  8. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  9. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

随机推荐

  1. RT-Thread的线程（任务）处理【RT-Thread学习笔记 2】

    RT-Thread中使用线程这个概念,而不是任务.两者相似,我在这里把他的线程当作任务来理解了 1.任务处理: 动态任务相关API 创建任务:rt_thread_create函数,创建任务之后会返回r ...

  2. HotSpot 自动内存管理笔记与实战

    1.对象的创建 虚拟机遇到一条new指令时,首先会去检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的类是否已被加载.解析和初始化过.如果没有,则必须先进行相应的类的 ...

  3. Stanford NLP学习笔记：7. 情感分析（Sentiment）

    1. 什么是情感分析(别名:观点提取,主题分析,情感挖掘...) 应用: 1)正面VS负面的影评(影片分类问题) 2)产品/品牌评价: Google产品搜索 3)twitter情感预测股票市场行情/消 ...

  4. javascript 获取iframe中的dom

    太扯了,一个多小时都没搞定,获取不到iframe中的dom元素. <div id="one"> this is one </div> <div> ...

  5. 评论alpha版本发布

    讲解顺序: 1.  新蜂:俄罗斯方块 俄罗斯方块已经完成了核心的游戏部分,可以流畅的进行游戏,经验值功能也已经完成,目前进度很好:不足之处主要有:后续的显示内容还没完成,所以界面空出来很多板块,alp ...

  6. pyqt5安装

    花了一天时间,终于是装好了. 这东西硬是把我从Python2掰弯成了Python3 本来用pip安装了一个pyqt,但是后来才发现,这是个x64版本的. 我不知道啊! 我以为是还要装qt5 所以我把q ...

  7. vc6.0运用mysql数据库中的编码所导致的乱码问题（接收和输出的编码必须要一致）

    [编译中遇见的问题]       ①在用vc 6.0去调用MySQL中的数据时,出现中文乱码       ②不明白mysql中的码制 [开始解决问题]      ①打开mysql控制台         ...

  8. 基于JS功能强大的日期插件Kalendae

    开发中需要一个日期插件,可以在zepto下使用,可以选择日期段,可以设置不可选日期 找到一个完全满足的,并且基于JS不依赖于任何库. 在线演示:http://chipersoft.com/Kalend ...

  9. PullToRefreshListView加载更多定位的解决方法

    之前项目里,早起用到了PullToRefreshListView,后来一部分用到了RefreshListView,最近在做优化的时候,其中一个问题就是PullToRefreshlistView上拉加载 ...

  10. instanceof关键字

    instanceof是Java.php的一个二元操作符(运算符),和==.>.<是同一类东西.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是判断其左边对象是否为其右边类的实 ...