canvas画水平曲线走势图

来源：互联网发布：java 生成zip压缩文件编辑：程序博客网时间：2024/04/27 17:04
<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <meta charset="utf-8">    <meta name="renderer" content="webkit">    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">    <title> </title>    <style type="text/css">    </style>    <script type="text/javascript">         var drawLine = {};        !function () {                       //求数组最大值            Array.prototype.max = function () {                var max = this[0];                var len = this.length;                for (var i = 1; i < len; i++) {                    if (this[i] > max) {                        max = this[i];                    }                }                return max;            }            function draw(arr) {                                var width = 250, height = 100;                var maxV = arr.max();                //计算y轴增量                var yStep = height / maxV;                console.log(maxV);                var domCan = document.getElementById("canDom");                var g = domCan.getContext("2d");                //g.rotate(180 * Math.PI / 180);//旋转90度                //g.translate(50, 0);                //g.scale(1,-1);                          g.beginPath();                g.lineWidth = 2;                g.strokeStyle = "#c30000";                //g.moveTo(0, 0);//开始画图的位置                var x_space = width / (arr.length - 1);//水平点的间隙像素                           //g.lineTo(15, 60);  x,y,x表示水平向右延伸，y表示垂直高度位置，从画板最左上角(0,0)开始计算坐标                var xLen = 0;                for (var i = 0; i < arr.length; i++) {                    var yValue = arr[i];//纵坐标值                    xLen += x_space;                    var yPont = height - yValue * yStep;                    if (i == 0) {                        xLen = 0;                    }                    var m = xLen + "," + yPont;                    console.log(m);                    g.lineTo(xLen, yPont);                }                //g.lineTo(15, 60);                          //g.lineTo(20, 30);                //g.lineTo(30, 40);                //g.lineTo(40, 50);                              g.stroke();                g.closePath();            }            drawLine.minCurve = draw;            //window.drawMinLine = draw;        }();        window.onload = function () {            var arr = [10, 50, 30, 70, 80, 40, 90, 110, 80, 60, 69, 80, 80, 10, 50, 30, 70, 80, 40, 97, 80, 70, 60, 50, 80];            //var arr = [30, 80,50,70];                      //drawMinLine(arr);            drawLine.minCurve(arr);        }     </script></head><body>    <canvas id="canDom" width="250" height="100" style="border:1px solid #ccc;"></canvas>    </body></html>
效果图：
阅读全文
0 1