zoukankan      html  css  js  c++  java
  • 用canvas画布画柱状图

    <!DOCTYPE html>
    <html> 
        <head>
        <meta charset="utf-8" />
        <title>柱状图</title>
        <style type="text/css">
        canvas {
        border: 1px solid #000;
        }
        </style>
        </head>
        <body>
        <canvas width="800px" height="500px"></canvas>
        <script type="text/javascript">
        var myCanvas = document.querySelector("canvas");
        var ctx = myCanvas.getContext("2d");
        var space= 100;
        //动态获取画布大小
    var canvasW = ctx.canvas.width;
        var canvasH = ctx.canvas.height;
        var yd=30;
        var x0=yd;
        var y0 = Math.floor(canvasH-yd);
        ctx.beginPath();
        ctx,moveTo(x0,y0);
        ctx.lineTo(canvasW-x0,y0);
        ctx.strokeStyle="#eee";
        ctx.stroke();
    
        ctx.beginPath();
        ctx,moveTo(x0,y0);
        ctx.lineTo(x0,yd);
        ctx.strokeStyle="#eee";
        ctx.stroke();
    
        ctx.beginPath();
        for (var i = 0; i < 5; i++) {
        ctx.moveTo(x0, y0-space * i - 0.5);
        ctx.lineTo(canvasW, y0-space * i - 0.5);
        ctx.strokeStyle = "#000";
        ctx.stroke();
        }
    
        for(var i = 0; i < 5; i++) {
        ctx.moveTo(x0-6, y0-space * i - 0.5);
        ctx.lineTo(x0, y0-space * i - 0.5);
        ctx.strokeStyle = "#eee";
        ctx.stroke();
    
        ctx.font="12px 微软雅黑";
    ctx.textAlign="right";
        ctx,textBaseline="middle";
        ctx.fillStyle="#000";
        ctx.fillText(100*i,x0-6,y0-space*i);
        }
    
        var arr=[
        {
        x:"Mon",
        y:10
        },
        {
        x:"Tue",
        y:60 
        },
        {
        x:"Wed",
        y:200 
        },
        {
        x:"Thu",
        y:340 
        },
        {
        x:"Fri",
        y:380 
        },
        {
        x:"Sat",
        y:340 
        },
        {
        x:"Sun",
        y:220 
        }
        ]
        ctx.beginPath();
        ctx.moveTo(x0,y0);
        for(var i=0;i<arr.length;i++){
        ctx.moveTo(x0+space*(i+1),y0);
        ctx.lineTo(x0+space*(i+1),y0+6);
        ctx.strokeStyle="#000";
        ctx.stroke();
    
        ctx.font="16px 微软雅黑";
    ctx.textAlign="center";
        ctx.textBaseline="top";
        ctx.fillStyle="#000";
        ctx.fillText(arr[i].x,x0+space*(i+1),y0+6);
    
        ctx.fillStyle="#6495ed";
        ctx.fillRect(x0+space*(i+1)-30,y0-arr[i].y,60,arr[i].y);
        ctx.textBaseline="top";
        ctx.fillStyle="#6495ed";
        }
        </script>
    </html>
    
     

     

  • 相关阅读:
    20180610模拟赛T3——书本整理
    20180610模拟赛T1——脱离地牢
    20180606模拟赛T4——数学游戏
    软工2019作业一
    期末总结
    <英狼>--团队作业3 王者光耀--终极版
    团队作业3--王者光耀(体会)
    <英狼> 团队作业2--王者光耀
    王者光耀--个人任务
    团队-----英狼
  • 原文地址:https://www.cnblogs.com/3542446186qq/p/10098597.html
Copyright © 2011-2022 走看看