在頁面上創建canvas標簽，然后獲取canvas這個元素，因為是畫2D圖，所以是調用.getContext('2d')二維圖方法vartarget=document.getElementBy' /> 
    • 

    • <kbd id="qyk40"></kbd>
  • 

    • <strike id="qyk40"></strike><samp id="qyk40"><pre id="qyk40"></pre></samp>
    


    
    
    
    

    
    
    
    

    

    
    
    


    
    
    

        
        
    
            
    
                
    
                    
    
                        
    
                            
    
                                
                                
    
                                    
    基礎知識：
    

    <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>
                                    
    
                                
                                
                                
                            
    
                        
    
                        
                    
    
                
    
            
    
        
    
        

    
    
    




    
    
    
    
        
    
            
    
                
    
                    
    
                        
                    
    
                    
    
                        
    穩定
    
                        產品高可用性高并發
                    
    
                
    
                
    
                    
    
                        
                    
    
                    
    
                        
    貼心
    
                        項目群及時溝通
                    
    
                
    
                
    
                    
    
                        
                    
    
                    
    
                        
    專業
    
                        產品經理1v1支持
                    
    
                
    
                
    
                    
    
                        
                    
    
                    
    
                        
    快速
    
                        MVP模式小步快跑
                    
    
                
    
                
    
                    
    
                        
                    
    
                    
    
                        
    承諾
    
                        我們選擇聲譽
                    
    
                
    
                
    
                    
    
                        
                    
    
                    
    
                        
    堅持
    
                        10年專注高端品質開發
                    
    
                
    
            
    
        
    
    
    
    

    
    
    

    
    
    
    
        
            
            
      
                
    • 
                    返回頂部
                
      • 
            
    
            
    
    
    


    

















国产在线精品观看一区|
无码精品A∨在线观看十八禁
|
动漫精品专区一区二区三区不卡|
狠狠入ady亚洲精品|
99精品热这里只有精品|
亚洲精品国产福利片|
99精品视频在线观看免费播放
|
亚洲国产精品自在在线观看|
亚洲欧洲国产精品香蕉网|
久久狠狠一本精品综合网|
国产A∨国片精品一区二区|
在线亚洲v日韩v|
日韩精品免费一级视频|
国产AV一区二区精品凹凸|
国产精品特黄毛片|
国产精品极品美女自在线观看|
WWW夜片内射视频日韩精品成人
|
久久精品无码一区二区日韩AV
|
亚洲首页国产精品丝袜
|
久久精品国产一区二区三区日韩|
国产精品无码一区二区三区在
|
国产精品美女久久久久av爽|
三级高清精品国产|
日本精品久久久久久久久免费|
日韩精品一区在线|
日韩不卡中文字幕|
高清免费久久午夜精品|
亚洲国产精品第一区二区三区|
无码8090精品久久一区|
成人国产精品高清在线观看|
亚洲国产精品尤物yw在线|
国产A级毛片久久久精品毛片|
国产成人久久精品二区三区|
亚洲情侣偷拍精品|
久久九九久精品国产免费直播|
久久精品国产99久久丝袜|
9久热这里只有精品免费|
国内大量偷窥精品视频|
国内精品伊人久久久久AV影院|
久久精品一区二区国产|
久久99国产精品成人|