svg绘制圆弧(一)
来源:互联网 发布:舒尔特表训练软件 编辑:程序博客网 时间:2024/05/18 02:23
转载地址:https://www.oschina.net/code/snippet_170216_54737
绘制圆弧案例:
<!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>
0 0
- svg绘制圆弧(一)
- svg绘制圆弧(二)
- SVG path绘制百分比圆弧,给力啊
- Android View的绘制高级篇 一(折线图,圆弧图,柱状图)
- qt 之绘制 圆弧(抽奖圆盘)
- Opera中绘制的SVG圆弧很隐蔽的一个bug
- j2me-绘制圆弧
- CANVAS绘制圆弧
- drawArc绘制圆弧
- drawArc方法:绘制圆弧
- Qt之图形(绘制漂亮的圆弧)
- SVG学习(一)
- svg笔记(一)
- SVG,Vector(一)
- 从绘制圆弧思考定位
- OpenGL绘制圆弧/圆/饼图
- canvas绘制文本 圆弧 详解
- 3.canvas:圆弧的绘制
- zoj 3601unrequited Love
- 常用颜色定义
- HW accelerated
- WinSock 异步I/O模型[1]---选择模型 - select
- Java设计模式之简单工厂
- svg绘制圆弧(一)
- servlet学习笔记(1)
- Java设计模式之适配器模式
- picasso-高级使用之自定义缓存位置
- 关于Log4j不重启重新加载配置文件
- Java设计模式之外观模式
- 网游服务器csv配置设计
- rocketmq基本概念
- n级阶梯,每次走一步和两步或三步,有多少种走法