html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.html
准备属性值：
本文使用js画直线，运用到css中的一些属性。
绘制的步骤：
在本例中，绘制直接使用鼠标。点击获得起始点，拖动到终点获得结束点，鼠标松开就绘制图形。
获得起始点：
获得结束点：
绘制直线：
使用了jquery中的animate()方法。
js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.js
html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBall/demo2.html
小球的属性：
创建小球：
使小球运动：
将之前的画直线的方法封装成一个固定起点和终点的类。
js: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/js/createLine.js
html: https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawTrajectory/demo1.html
帮你改了一下，能跑起来了。嗯.......你这个有一些语法问题和拼写不仔细的地方，估计太着急，有些粗心了~<!DOCTYPE html>
<html>
<head>
<title>canvas</title>
<style>
*{
padding: 0
margin: 0
}
#container{
height: 80vh
width: 80vw
margin-top: 10vh
margin-left: 10vw
border: 1px solid #aaff66
}
</style>
</head>
<body>
<div id="container">
<canvas id="canvas"></canvas>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d')
var circle = function(x, y, radius, fillCircle) {
ctx.beginPath()
ctx.arc(x, y, radius, 0, Math.PI * 2, false)
ctx.closePath()
ctx.fillStyle="green"
if (fillCircle) {
ctx.fill()
} else {
ctx.stroke()
}
}
var width=canvas.width = document.getElementById('container').offsetWidth
var height=canvas.height = document.getElementById('container').offsetHeight
var Ball=function(){
this.x=width/2
this.y=height/2
this.xSpeed = 5
this.ySpeed=0
}
Ball.prototype.move=function(){
this.x+=this.xSpeed
this.y+=this.ySpeed
if(this.x<0){
this.x=width
}else if(this.x>width){
this.x=0
}else if(this.y<0){
this.y=height
}else if(this.y>height){
this.y=0
}
}
Ball.prototype.draw=function(){
circle(this.x,this.y,10,true)
}
var ball= new Ball()
setInterval(function(){
ctx.clearRect(0,0,width,height)
ball.draw()
ball.move()
},30)
}
</script>
</html>
你好，
在网页中画椭圆，方式还比较多，最简单的其实不需要使用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>
好了，希望能解决你的问题！
