正文
javascript弧形,css弧形
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
百度地图javascript api 中如何画圆弧
你可以用添加/删除覆盖物这个API试试
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 创建点
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建折线
var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建圆
var polygon = new BMap.Polygon([
new BMap.Point(116.387112,39.920977),
new BMap.Point(116.385243,39.913063),
new BMap.Point(116.394226,39.917988),
new BMap.Point(116.401772,39.921364),
new BMap.Point(116.41248,39.927893)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建多边形
var pStart = new BMap.Point(116.392214,39.918985);
var pEnd = new BMap.Point(116.41478,39.911901);
var rectangle = new BMap.Polygon([
new BMap.Point(pStart.lng,pStart.lat),
new BMap.Point(pEnd.lng,pStart.lat),
new BMap.Point(pEnd.lng,pEnd.lat),
new BMap.Point(pStart.lng,pEnd.lat)
], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //创建矩形
//添加覆盖物
function add_overlay(){
map.addOverlay(marker); //增加点
map.addOverlay(polyline); //增加折线
map.addOverlay(circle); //增加圆
map.addOverlay(polygon); //增加多边形
map.addOverlay(rectangle); //增加矩形
}
//清除覆盖物
function remove_overlay(){
map.clearOverlays();
}
不过这需要三角函数，关于三角函数可以去看一下《揭秘javascript的三角函数》这篇文章，那里面对三角函数讲得很清楚了。
参考资料：
《揭秘javascript的三角函数》来自：
相关问答
Q1: js如何让列表按顺时针方向成半弧形排列
corel中有个镜像翻转，楼主要用镜像翻转后，在选择适应路径，就可以是正的了！镜像翻转就在你选择文字是什么字体的左边。希望对你有帮助！
Q2: html5+js能做出卫星式弧形菜单吗
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
""
html xmlns=""
head
title圆弧背景的导航菜单/title
meta http-equiv="content-type" content="text/html;charset=gb2312"
style type="text/css"
*{margin:0px;padding:0px;font-size:12px;}
.div_menu{ position:absolute;left:100px;top:100px;}
.ul_menu{list-style:none;}
.ul_menu li{float:left;margin-left:1px;border:1px solid #33CCCC;display:block;padding:5px 3px;background:url(images/menu_bg.gif) repeat-x 0px -80px;padding:2px 12px;}
.ul_menu li a{height:40px;width:auto;color:#ffffff;font-size:20px;font-weight:600;text-decoration:none;}
/style
script type="text/javascript"
var isIE = (document.all)?true:false;
var $ID = function(id){
return "string"==typeof id?document.getElementById(id):id;
}
var Class = {
create:function(){
return function(){
this.initilize.apply(this,arguments);
}
}
}
var Extend = function(destination, source){
for(var property in source){
destination[property] = source[property];
}
}
var Bind = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(){
return fun.apply(object,args);
}
}
var BindAsEventListener = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event){
return fun.apply(object,[event||window.event].concat(args));
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
};
/script
script type="text/javascript"
var MyMenu = Class.create();
MyMenu.prototype = {
initilize:function(ul){
this.lis = ul.getElementsByTagName("li");
for(var i=0;ithis.lis.length;i++){
new BgChange(this.lis[i]);
}
}
}
var BgChange = Class.create();
BgChange.prototype = {
initilize:function(li){
this.li = li;
this._fnMouseOver = Bind(this,this.MouseOver);
this._fnMouseOut = Bind(this,this.MouseOut);
addEventHandler(this.li,"mouseover",this._fnMouseOver);
addEventHandler(this.li,"mouseout",this._fnMouseOut);
this.timer = null;
this.i = -80;
},
MouseOver:function(){
this.Stop();
this.i+=2;
if(this.i=0){
window.clearTimeout(this.timer);
this.i = 0;
}else{
this.ShowBg();
this.timer = window.setTimeout(this._fnMouseOver,10);
}
},
MouseOut:function(){
this.Stop();
this.i-=2;
if(this.i=-80){
window.clearTimeout(this.timer);
this.i = -80;
}else{
this.ShowBg();
this.timer = window.setTimeout(this._fnMouseOut,10);
}
},
ShowBg:function(){
this.li.style.backgroundPosition = "0px " + this.i + "px";
},
Stop:function(){
if(this.timer){
window.clearTimeout(this.timer);
}
}
}
onload = function(){
new MyMenu($ID("ul_menu"));
}
/script
/head
body
div class="div_menu"
ul class="ul_menu" id="ul_menu"
lia href="#"欢迎光临/a/li
lia href="#"最新更新/a/li
lia href="#"下载排行/a/li
lia href="#"网页特效/a/li
lia href="#"广告联系/a/li
/ul
/div
/body
/html
Q3: d3.js画圆弧和圆的坐标、弧长计算方法
svg路径画圆的特性：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。
rx，ry: 是椭圆的两个半轴的长度。
x-axis-rotation: 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
large-arc-flag: 是标记绘制大弧(1)还是小弧(0)部分。
sweep-flag: 是标记向顺时针(1)还是逆时针(0)方向绘制。
x，y: 是圆弧终点的坐标。
已知两点和半径求弧路径。
已知圆上两点和半径求弧长。
已知圆上的y轴半径和圆心求相交的x轴坐标。
已知圆上的x轴半径和圆心求y轴坐标。
Q4: html+css+javascript如何做沿着弧形线条排版的文字
文字position，然后通过计算算出每个文字在弧上的坐标，然后设置left,top
