在页面上创建canvas标签,然后获取canvas这个元素,因为是画2D图,所以是调用.getContext('2d')二维图方法vartarget=document.getElementBy" />
基础知识:
<canvas id="demo" width="400" height="400">canvas>

在页面上创建canvas标签,然后获取canvas这个元素,因为是画2D图,所以是调用.getContext('2d') 二维图方法

var target = document.getElementById('demo'),     pic = target.getContext('2d');

canvas作图的平面空间,该空间的每个点都有自己的坐标,x表示横坐标,y表示竖坐标。原点(0, 0)位于图像左上角,x轴的正向是原点向右,y轴的正向是原点向下。

部分API的介绍: 

  pic.beginPath(); //创建开始描绘路径(每一条线都需要重新创建一次,否则以后的操作【如填充颜色】都会反映在此路径)    pic.moveTo(0, 0); //描绘的起点    pic.lineTo(100,100); // 设置描绘线的终点,可以调用多次(以上次的终点为起点,继续描绘)    pic.lineTo(240,340);    pic.lineWidth = 1; //设置宽度    pic.strokeStyle = '#259'; //设置颜色    pic.stroke(); //填充    pic.closePath(); //关闭此路径,可选

封装:

  描绘路径必需知道起点坐标与终点坐标,因为可能是多次描绘,所以就需要用到二维数组把各个坐标保存下来,如[ [0,0],[100,50],[2,50] ],然后遍历二维数组,多次调用lineTo方法进行描绘。封装函数如下:

// 画线     function drawContLine(opt){        pic.beginPath();        var path = opt.path,//[[0,0],[20,30]......]            color = opt.color;        pic.moveTo(path[0][0],path[0][1]);        var n = 1,            len = path.length;        for(;n){            pic.lineTo(path[n][0],path[n][1]);        }        pic.lineWidth = 1;        pic.strokeStyle = color;        pic.stroke();        pic.closePath();    }

例子:月份成绩分数对比曲线图

  深圳小程序开发

完整代码:

DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>    <title>Documenttitle>    <style type="text/css">    .ui-fill{border:1px solid #666;border-top:none;border-right:none;width:400px;height:400px;margin:50px auto;position:relative;}    .scroe span{position:absolute;left:-40px;}    .a10{top:-10px;}.a9{top:30px;}.a8{top:70px;}.a7{top:110px;}.a6{top:150px;}    .a5{top:190px;}.a4{top:230px;}.a3{top:270px;}.a2{top:310px;}.a1{top:350px;}    .year span{position:absolute;top:410px;white-space:nowrap;color:#700404;}    .y1{left:70px;}.y2{left:150px;}.y3{left:230px;}.y4{left:310px;}.y5{left:390px;}    style>head><body>    <div class="ui-fill">        <canvas id="demo" width="400" height="400">canvas>        <div class="scroe">            <span class="a1">10span>            <span class="a2">20span>            <span class="a3">30span>            <span class="a4">40span>            <span class="a5">50span>            <span class="a6">60span>            <span class="a7">70span>            <span class="a8">80span>            <span class="a9">90span>            <span class="a10">100span>        div>        <div class="year">            <span class="y1">1月span>            <span class="y2">2月span>            <span class="y3">3月span>            <span class="y4">4月span>            <span class="y5">5月span>        div>    div>    <script type="text/javascript">    var target = document.getElementById('demo');    var pic = target.getContext('2d');    //参数    var sum = 400,        ratio = 400/100;    // 画线     function drawContLine(opt){        pic.beginPath();        var path = opt.path,//[[0,0],[20,30]......]            color = opt.color;        pic.moveTo(path[0][0],path[0][1]);        var n = 1,            len = path.length;        for(;n<len;n++){            pic.lineTo(path[n][0],path[n][1]);        }        pic.lineWidth = 1;        pic.strokeStyle = color;        pic.stroke();        pic.closePath();    }    // 刻度线    (function(){        var scale = 20,            i = sum/scale,            n = 0;        for(;n<i;n++){            drawContLine({'path':[[scale*n*4,0],[scale*n*4,sum]],'color':'#f4f4f4'});            drawContLine({'path':[[0,scale*n],[sum,scale*n]],'color':'#f4f4f4'});                                }    })();    // 分数转化为坐标输出    function transforCoor(opt){        var scroes = opt.scroes,            scale = 20*4,            n = 0,            len = scroes.length,            a_path = [];        for(;n<len;n++){            var x = sum - scroes[n]*ratio;            var arry = [scale*(n+1),x];            //console.log(arry);            a_path.push(arry);        }        drawContLine({'path':a_path,'color':opt.color});    }    transforCoor({'scroes':[90,80,98,70,60],'color':'#259'});    transforCoor({'scroes':[88,86,85,84,85],'color':'#f60'});    script>body>html>

稳定

产品可用性高于99.9%

贴心

全国7*24小时客服热线

专业

产品经理在线技术支持

快速

快速上线运营快

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部