<!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查询工程结算分包款转出

    总一 借工程结算负数 贷工程结算对冲问题 oralce使用聚合函数wmsys.wm_concat字段显示 clob :应该是,10.2.0.4以前,是varchar2,10.2.0.5开始,是CLOB ...

  2. C#动手实践：Kinect V2 开发（2）：数据源工作原理及红外源Demo

    Kinect体系架构

  3. Android sdk tool android 命令参数

      命令参数说明: $ ./android --? Error: Flag '--?' is not a valid global flag. Did you mean to specify it a ...

  4. EASYUI 表单(FORM)用法

    提交表单 $('#addform').form('submit', { url: '/Admin/AdminUser/AddAdminUser', onSubmit: function () { re ...

  5. nyoj 708 ones 动态规划

    http://acm.nyist.net/JudgeOnline/problem.php?pid=708 状态转移方程的思路:对于一个数N,可以是N - 1的状态+1 得到,另外,也可以是(n / 2 ...

  6. Linux学习笔记（二）

    1.tzselect无法是使用 vim /usr/bin/tzselect 将 ${TZDIR=pwd}改为${TZDIR=/usr/share/zoneinfo} 2.sudo apt-get in ...

  7. git 远程仓库 轻松创建

    很多时候,为了方面管理我们写的代码,我们采用git 远程仓库来进行管理和备份.防止代码被他人篡改或删除.那如何来进行创建远程仓库呢? 1.我们必须有一个远程服务器端,在这里可以把任意一台电脑作为服务器 ...

  8. source tree 推送错误解决

    fatal: The remote end hung up unexpectedly 出现这个问题是因为文件过大 解决办法: 打开git bash 输入git config --global http ...

  9. flash的读写与擦除

    对于flash的认识,比较肤浅,在网上找了些资料,感谢 http://blog.csdn.net/lin364812726/article/details/18815395  的博主, 将其博文转载过 ...

  10. (转)You might not need jQuery

    You might not need jQuery You certainly can support IE 9 and below without jQuery, but we don't. Ple ...