<!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. 结算凭证中委托付款部分sql

    select a.makevdate,a.summary,a.totalcredit,a.cent_typeid,c.accidname from fts_voucher a,fts_voucher_ ...

  2. 【学】React的学习之旅4-添加事件(onChange)

    实现联动绑定,在文本框中输入内容的同时,后面的span里内容跟着一起变化: onChange(),一旦触发一次变动,就执行某个函数: 既然已经在getInitialState属性里申明了一个变量inp ...

  3. oracle之synonym小结

    oracle中的同义词可以认为是对表.视图.序列.存储过程.函数.程序包或者其他同义词的一个别名,也就是用一个别名来映射的作用. oracle中的同义词可以分为私有和公有两种,私有同义词(privat ...

  4. SQLite常用语句

    // 错误存储路径 - (NSString *)dataFilePath{ NSString *dbPath = [NSSearchPathForDirectoriesInDomains(NSLibr ...

  5. golang

    Golang, 以17个简短代码片段,切底弄懂 channel 基础 (原创出处为本博客:http://www.cnblogs.com/linguanh/) http://www.cnblogs.co ...

  6. .NET并行编程 - 并行方式

    使用多线程可以利用多核CPU的计算能力,可以提供更好的程序响应能力,但是每个线程都有开销,需要注意控制线程的数量. 1. System.Threading.Thread 使用多线程最直接的是使用Sys ...

  7. Sql Server分割字符串函数

    -- Description: 分割字符串函数 -- SELECT * FROM dbo.Split('a,b,c,d,e,f,g',',') -- ========================= ...

  8. git push error: A Contributor Agreement must be completed before uploading

    因为是从官方版本库做的镜像,所以有些权限直接从官方同步到了本地. 今天,有同事执行git push操作,报错: 根据网上搜索的内容,在gerrit.config中[auth]中添加如下内容: [aut ...

  9. Junit4参数化测试实现程序与用例数据分离

    http://touchfu.iteye.com/blog/732930 现状:你是不是还在为自己的TestCase代码杂乱无章而苦恼,咎其根本还在于针对不同的用例,输入参数和mock信息的组装全部作 ...

  10. SSH配置免密码登陆

    1.使用SSH-keygen,然后一路回车使之生成id_rsa何id_rsa.pub文件,id_rsa.pub为公匙文件. 2.使用命令:cat ~/.ssh/id_rsa.pub >> ...