你好，
在网页中画椭圆，方式还比较多，最简单的其实不需要使用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绘制椭圆形图案的方法，HTML5canvas
没有画椭圆的方法，以下代码可以画出椭圆，分享给大家供大家参考，具体实现方法如下：
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>
