怎么用js画个椭圆

JavaScript049

怎么用js画个椭圆,第1张

你好,

在网页中画椭圆,方式还比较多,最简单的其实不需要使用JS:

<div class="ellipse"></div>

<style>

.ellipse {

  width: 400px

  height: 200px

  border-radius: 50%

  background-color: #000

}

</style>

还有一种不需要使用JS的:

<svg width="800" height="400">

    <ellipse rx="200" ry="100" cx="400" cy="200"></ellipse>

</svg>

当然,这种也可以使用JS来实现,比如:

<svg width="800" height="400" id="J_SvgWrap"></svg>

<script>

var svg = document.getElementById('J_SvgWrap')

var ell = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')

ell.setAttribute("cx", 400)

ell.setAttribute("cy", 200)

ell.setAttribute("rx", 200)

ell.setAttribute("ry", 100)

svg.appendChild(ell)

</script>

还有一种使用JS实现的方式:

<canvas width="800" height="400" id="J_MyCanvas"></canvas>

<script>

var cvs = document.getElementById('J_MyCanvas')

var ctx = cvs.getContext('2d')

ctx.scale(1, 0.5)

ctx.arc(400, 200, 200, 0, Math.PI * 2)

ctx.fill()

</script>

好了,希望能解决你的问题!

arcgisjsapi根据屏幕输入的经纬度坐标定位从而获取地图中心点坐标。

1.ArcGIS产品线为用户提供一个可伸缩的,全面的GIS平台。ArcObjects包含了大量的可编程组件,从细粒度的对象(例如,单个的几何对象)到粗粒度的对象(例如与现有ArcMap文档交互的地图对象)涉及面极广,这些对象为开发者集成了全面的GIS功能。

2.每一个使用ArcObjects建成的ArcGIS产品都为开发者提供了一个应用开发的容器,包括桌面GIS(ArcGISDesktop),嵌入式GIS(ArcGISEngine)以及服务端GIS(ArcGISServer)。

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<canvas id="cvs" width="200" height="200"></canvas>

<script>

//扇形对象

CanvasRenderingContext2D.prototype.sector = function (x, y, radius, sDeg, eDeg) {

    // 初始保存

    this.save()

    // 位移到目标点

    this.translate(x, y)

    this.beginPath()

    // 画出圆弧

    this.arc(0,0,radius,sDeg, eDeg)

    // 再次保存以备旋转

    this.save()

    // 旋转至起始角度

    this.rotate(eDeg)

    // 移动到终点,准备连接终点与圆心

    this.moveTo(radius,0)

    // 连接到圆心

    this.lineTo(0,0)

    // 还原

    this.restore()

    // 旋转至起点角度

    this.rotate(sDeg)

    // 从圆心连接到起点

    this.lineTo(radius,0)

    this.closePath()

    // 还原到最初保存的状态

    this.restore()

    return this

}

//执行

function start(degrees){

    var ctx = document.getElementById('cvs').getContext('2d')

    degrees++

    ctx.sector(100,100,50,0,Math.PI/180*degrees).fill()

    if(degrees<360){

        setTimeout('start('+degrees+')',10)

    }else{

        alert('画完了')

    }

}

start(1)

</script> 

</body>

</html>