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()
}