<!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. Web性能测试工具JMeter

    做Web方面的黑盒测试,也就是功能测试,基本不需要什么测试工具,都是直接打开浏览器访问,点一点界面就行. 现在流行的移动互联网应用,客户端和服务端的开发是分离的,两者开发进度肯定不一样,可能存在服务端 ...

  2. LeetCode 350. Intersection of Two Arrays II

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  3. js 取得 Unix时间戳(Unix timestamp)

    js 取得 Unix时间戳 Unix时间戳(Unix timestamp),或称Unix时间(Unix time).POSIX时间(POSIX time),是一种时间表示方式,定义为从格林威治时间19 ...

  4. Python基础篇【第3篇】: Python异常处理、反射、动态导入、利用反射的web框架

    异常处理 什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常.异常是Python对象,表示一个错误.当P ...

  5. 获取Finacial dimension value的description 值

    public static Description findDimensionValueDescription(DimensionValue _dimensionValue, Name _dimens ...

  6. 牛客网程序员面试金典：1.2——原串翻转(java实现)

    问题描述: 请实现一个算法,在不使用额外数据结构和储存空间的情况下,翻转一个给定的字符串(可以使用单个过程变量). 给定一个string iniString,请返回一个string,为翻转后的字符串. ...

  7. 十四、View Port 2.0

    1. 分为以下几类: (1) data classes: 用来访问scene中的geometry 和 shaders (2)scene override: 主要是用户自定义的drawing .shad ...

  8. qt 环境下mapx组件打包后编译产生c2248和c2512错误

    C:\Qt\Qt5.6.0\5.6\msvc2013\include\QtCore\qmetatype.h:760: error: C2248: “MapSpace::IRowCursor::IRow ...

  9. CentOS 7部署OpenStack（二）—安装keystone服务

    1.创建数据库 [root@controller ~]# mysql -u root -p [root@controller ~]# CREATE DATABASE keystone; [root@c ...

  10. iOS在label上加横杠

    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 50, 200, 50)];    [self.view addSubvi ...