怎么用js画个椭圆

JavaScript014

怎么用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>

好了，希望能解决你的问题！

本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法，HTML5

canvas

没有画椭圆的方法，以下代码可以画出椭圆，分享给大家供大家参考，具体实现方法如下：

1、在一个隐式的画布

(将

其

CSS

定义成：display:none

)

上画园。

2、将隐式画布的影像，以不同的宽高比值，画在另一个显式的画布，以使园变成椭圆。

3、进而，加进动画功能。

<html>

<head>

<meta

http-equiv="Content-Type"

content="text/html

charset=utf-8"

/>

<title>测试颜色背景</title>

<script>

var

ticker=0

var

col

=

new

Array("#000000","#A52A2A","#B8860B","pink","green","yellow","red","orange","#BB008B","#8B0000")

function

drawBackground(){

var

canvasHide=document.getElementById("hide")

//隐藏的画布

var

g=canvasHide.getContext("2d")

//找出隐藏画布

hide

的画笔

g

g.clearRect(0,0,1200,800)

//清理隐藏画布

var

i=0

do

{

//画

不同颜色

依次同心发散的园

g.beginPath()

var

grd=g.createRadialGradient(300,300,300-i*25,

300,300,265-i*25)

grd.addColorStop(0,col[(0+i+ticker)%col.length])

grd.addColorStop(1,col[(1+i+ticker)%col.length])

g.fillStyle=grd

g.arc(300,300,300-i*25,0,2*Math.PI)

g.fill()

i++

}

while(i<11)

//找出显式画布

myCanvas

的画笔

gg

var

gg=document.getElementById("myCanvas").getContext("2d")

gg.clearRect(0,0,myCanvas.width,myCanvas.height)

//清理显式画布

/*

将隐式画布

hide

的园形图像，

*

以

宽

600,

高

300

的比例,

*

画到显式画布

myCanvas,

*

结果，隐式画布

hide

的园形图像，在显式画布

myCanvas

上

成了椭圆

*/

gg.drawImage(canvasHide,0,0,600,300)

ticker++

}

function

preperation(){

setInterval('drawBackground()',1000)

}

</script>

<style>

#myCanvas{

position:absolute

left:0px

top:0px

}

#hide{

display:none

}

</style>

</head>

<body

onLoad="preperation()">

<canvas

id="myCanvas"

width="600"

height="400"

></canvas>

<canvas

id="hide"

width="600"

height="600"

></canvas>

</body>

</html>

希望本文所述对大家的web程序设计有所帮助。

因为你设置了css样式，默认的canvas是300*150的，跟图片类似，设置了css宽高之后就拉伸了。

这里有个解决方法是，修改canvas默认的宽和高：

<canvas id="drawing" width="210" height="210"></canvas>