JS画几何图形之四【饼图】 - 相关文章

【JS画几何图形之四【饼图】】的更多相关文章

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画几何图形之三【正弦曲线】

数学式: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画几何图形之一【直线】

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画几何图形之五【过圆外一点作切线】

样例: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画斐波那契螺旋线（黄金螺旋线）

偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用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;…

jquery.wordexport.js打印echarts.js画出的柱状图

jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.wordexport.js只能打印出图片,所以我先把echarts柱状图换成图片再去打印的. 用echarts.js的API中的getDataURL()方法:导出图表图片,返回一个 base64 的 URL,可以设置为Image的src. <div id="tubi"></div&…

html+js+highcharts绘制圆饼图表的简单实例

下面我就为大家带来一篇html+js+highcharts绘制圆饼图表的简单实例.我觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随我过来看看吧实例如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 5…