Canvas 的绘制图表的基本用法

最新推荐文章于 2024-08-01 17:07:36 发布

搬砖的wqq

最新推荐文章于 2024-08-01 17:07:36 发布

阅读量2.5k

点赞数

分类专栏：实习文章标签： canvas js 前端

本文链接：https://blog.csdn.net/qq_33386783/article/details/50330841

版权

实习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

canvas 绘图画线和画圆的一些基本操作：

<canvas id="canvas">
当前浏览器不支持canvas,请更换浏览器。。（正常运行的情况下不会显示）
</canvas>
<script>
$.function(json){
var canvas = document.getElementById("canvas");

canvas.width=1024;
cnavas.height=768;

var context = canvas.getContext("2d");//绘图接口

context.lineWidth=5
context.strokeStyle="#005588"
context.arc(300,300,200,0,2*Math.PI)//300,300为圆心，200为半径。。

context.beginPath()
context.moveTo(100,100)//设置绘制状态点
context.lineTo(700,700)//到达的点
context.strokeStyle="#ffffff"//线条的颜色设置
context.fillStyle="rgb(20,100,30)"//给所画的图进行填充
context.closePath()
context.stroke()//注意会全部重新画一遍



//四巧板
var tabs=[
{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},//每一块的顶点
{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},
{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},
{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},

]

for(var i=0 ;i<tabs.length;i++){
draw(tabs[i],context)
}

function draw(piece,cxt){
cxt.beginPath();
cxt.moveTo(piece.p[0].x,piece.p[0].y);
for(var i=1;i<piece.p.length;i++){
cxt.closePath();

cxt.fillStyle=piece.color;
cxt.fill();
}
}

}

</script>

例如：自己画的一个图表

</section>
        <div class="row"></div> 
        <div class="panel panel-default ng-scope">
            <div class="panel-heading">
                <strong><span class="glyphicon glyphicon-th"></span>当日订单趋势图</strong>
            </div>
            <!-- 趋势表 -->
            <div class="panel-body">
                <div style="width: 100%; height: 300px; padding: 0px; position: relative;" class="ng-isolate-scope">
                    <canvas class="flot-base" width="1078" height="300" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1078px; height: 300px;"></canvas>
                    <div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
                        <div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 19px; text-align: center;">0点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 64px; text-align: center;">1点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 109px; text-align: center;">2点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 154px; text-align: center;">3点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 199px; text-align: center;">4点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 244px; text-align: center;">5点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 289px; text-align: center;">6点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 334px; text-align: center;">7点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 379px; text-align: center;">8点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 424px; text-align: center;">9点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 466px; text-align: center;">10点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 511px; text-align: center;">11点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 556px; text-align: center;">12点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 601px; text-align: center;">13点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 646px; text-align: center;">14点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 691px; text-align: center;">15点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 736px; text-align: center;">16点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 781px; text-align: center;">17点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 827px; text-align: center;">18点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 872px; text-align: center;">19点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 917px; text-align: center;">20点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 962px; text-align: center;">21点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 1007px; text-align: center;">22点</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 1052px; text-align: center;">23点</div>
                        </div>
                        <div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                            <div class="flot-tick-label tickLabel" style="position: absolute; top: 269px; left: 1px; text-align: right;">0</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; top: 202px; left: 1px; text-align: right;">50</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; top: 136px; left: 6px; text-align: right;">100</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; top: 70px; left: 6px; text-align: right;">150</div>
                            <div class="flot-tick-label tickLabel" style="position: absolute; top: 4px; left: 6px; text-align: right;">200</div>
                        </div>
                    </div>
                    <canvas  id="pic" class="flot-overlay changepic" width="1078" height="300" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1078px; height: 300px;"></canvas>
                <div class="legend">
                    <div style="position: absolute; width: 86px; height: 17px; top: 17px; right: 18px; opacity: 0.85; background-color: rgb(255, 255, 255);"></div>
                    <table style="position:absolute;top:17px;right:18px;;font-size:smaller;color:#545454">
                        <tbody>
                            <tr>
                                <td class="legendColorBox">
                                    <div style="border:1px solid #ccc;padding:1px">
                                        <div style="width:4px;height:0;border:5px solid rgb(27,183,160);overflow:hidden"></div>
                                    </div>
                                </td>
                                <td class="legendLabel">订单量趋势图</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
        </div>
    </div>
</section>
<%@ include  file="common/footer.jsp"%>

<script type="text/javascript">
$(function(){
    var access_token ='<s:property value="access_token"/>';
    $(".order-date").datepicker().on('changeDate.datepicker.amui',function(){      
        $.ajax({
            url: "write_order_date",
            type:"post",
            dataType : "json",
            data:{
                "orderDate":$("#order-date-input").val()
                },

            success: function(json){
                var newuser=json["newUser"];
                var newUserArr = eval(newuser);
                var newuserArrlen=newUserArr.length;
                var userNumber = 0;
                for(var i=0;i<newuserArrlen;i++){
                    userNumber += newUserArr[i]["new_user"];
                }
                var money=json["money"];
                var number=json["number"];


                var orderNumList = json["orderNumList"];
                var count=new Array();
                if(orderNumList == 0){
                    for(var i = 0; i < 24; ++i){
                        count[i]=0;
                    }
                }else{
                    var orderNumListLen = orderNumList.length;
                    for(var i = 0; i < 24; ++i){
                        for(var j = 0; j < orderNumListLen; ++j){
                            if(i==orderNumList[j]["time"]){
                                count[i] = orderNumList[j]["count"];
                                break;
                            }else{
                                count[i]=0;
                                continue;
                            }   
                        }       
                    }   
                }
                //var time=new Array();



                var canvas= document.getElementById("pic");


                canvas.width=1078;
                canvas.height=300;
                var context=canvas.getContext("2d");
                //context.lineWidth=5;
            //  context.fillStyle='#000000';
            context.beginPath();
            context.strokeStyle="rgb(27,183,160)";
            context.arc(30,280-1.32*count[0],2,0,2*Math.PI);
            context.stroke();
            context.beginPath();
            context.strokeStyle="green";
            context.strokeText("(0,"+count[0]+")",15,270-1.32*count[0]);
            context.stroke();
            for(var i=1;i<24;i++){
                 context.beginPath();
                 context.strokeStyle="rgb(27,183,160)";
                 context.moveTo(30+(i-1)*45,280-1.32*count[i-1]);
                 context.lineTo(30+i*45,280-1.32*count[i]);
                 context.arc(30+i*45,280-1.32*count[i],2,0,2*Math.PI);
            //   context.putImageData();
                 context.closePath();
                 context.stroke();
                 context.beginPath();
                 context.strokeStyle="green";
                 context.strokeText("("+i+","+count[i]+")",9+i*45,270-1.32*count[i]);
                 context.stroke();
            }
                //$(".changepic").val();
                $(".today-new-fans").text(userNumber);
                $(".today-order-money").text(money);
                $(".today-order-number").text(number);
            },
        });

        }
    );

});
</script>