【JS画几何图形之一【直线】】的更多相关文章

JS画几何图形之一【直线】

JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点 这里的点我们使用span标签表示 //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){ document.write("<span id='"+opts.point[0]+""+opts…

JS画几何图形之六【过直线外一点作垂线】

样例:http://www.zhaojz.com.cn/demo/draw10.html 依赖:[点].[直线] //过直线外一点画垂线 function drawVerticalLine(point, line){ //画辅助线-start var color = 'DarkRed'; //垂线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawPoint({ pw:2,ph:2,color:'DarkRed',point: line[0] }); dra…

JS画几何图形之三【正弦曲线】

数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 //amplitude 振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palstan…

JS画几何图形之五【过圆外一点作切线】

样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 function drawCircleTangent(point, dot, r){ //画辅助线-start var color = 'DarkRed'; //切线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawLine(dot, [dot[0]+9*r,dot[…

JS画几何图形之二【圆】

半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA;  y = y0+rsinA ,A为弧度 样例:http://www.zhaojz.com.cn/demo/draw6.html 依赖:[点].[直线] 一.圆 //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){ var pstart = [dot[0]+r,…

JS画几何图形之四【饼图】

饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 依赖:[扇形] //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){ if(data && data.length > 0){ var accumulationAngleOfSlope = new Number(0); //累计偏移角度 var total = new Number(…

纯JS画点、画线、画圆的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

平面上画n条直线，最多能将平面分成多少部分？

转自:http://blog.csdn.net/cywosp/article/details/6724522 在一个平面上画1999条直线,最多能将这一平面划分成多少个部分? 没有直线时有一个空间:(1) 1条直线时,这条这些可以将这个空间分成两个:(1+1) 2条直线时,第二条直线可以和第一条直线相交,这样第二条直线可以将两个空间分成四个:(1+1+2) .... 注意到画每条直线时能增加多少个空间,取决于此直线从多少个空间中通过. 而从多少个空间中通过,取决于和多少条直线相交. 例如,在画第…

用JS画斐波那契螺旋线（黄金螺旋线）

偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FibonacciSequence</title> </head> <body> <…

js画一棵树

用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My JS tree</title> <style> body { width: 1000px; height: 570px;…