使用js画小球沿直线运动

JavaScript018

使用js画小球沿直线运动,第1张

js:  https://github.com/wangxia34/trajectory/blob/master/trajectory/html_js/drawBeeline/demo1.js

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

首先JavaScript没有类, 更没有包的概念. 只有对象, 一切都是对象.

然而JavaScript有面向对象的写法, 不过实际上是不支持面向对象的, 只是为了代码可读性.

可是话说回来, 类的概念是人定的, 所以Javascript也是可以画类图的.

<script type="text/javascript">

window.onload = function(){

var c = document.getElementById("myCanvas")

var content = c.getContext("2d")

//绘制二次方贝塞尔曲线

content.strokeStyle ="#FF5D43"

content.beginPath()

content.moveTo(0,200)

content.quadraticCurveTo(75,50,300,200)

content.stroke()

content.globalCompositeOperation = "source-over" //目标图像上显示源图像

//绘制上面曲线的控制点和控制线,控制点坐标为两直线的交点(75,50)

content.strokeStyle = "#f0f"

content.beginPath()

content.moveTo(75,50)

content.lineTo(0,200)

content.moveTo(75,50)

content.lineTo(300,200)

content.stroke()

}