master

分支 (1)

管理

管理

master

canvas-graph
/
zhuobiao.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #canvas {
            border: thin solid red;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    //水平标尺与canvas的距离
    var HORIZONTAL_AXIS_MARGIN = 50;
    //竖直标尺与canvas的距离
    var VERTICAL_AXIS_MARGIN = 50;
    //标尺起点
    var AXIS_ORIGIN = {
        x: HORIZONTAL_AXIS_MARGIN,
        y: canvas.height - VERTICAL_AXIS_MARGIN
    };
    //坐标的顶部
    var AXIS_TOP = VERTICAL_AXIS_MARGIN;
    //坐标的长度
    var AXIS_RIGHT = canvas.width - HORIZONTAL_AXIS_MARGIN;
    //小标记的间隔
    var a = 17;
    var b = 17;
    //坐标标记的范围
    var AXIS_WIDTH = AXIS_RIGHT - AXIS_ORIGIN.x;
    var AXIS_HEIGHT = AXIS_ORIGIN.y - AXIS_TOP;
    //纵向标记数值
    var NUM_VERTICAL_TICKS = AXIS_HEIGHT / b;
    //横向标记数值
    var NUM_HORIZONTAL_TICKS = AXIS_WIDTH / a;
    var TICK_WIDTH = 10;
    //标牌和坐标轴之间的距离
    var SPACE_BETWEEN_ABELS_AND_AXIS = 20;


    function drawAxes() {
        context.save();
        context.lineWidth = 1.0;
        context.fillStyle = "rgba(100, 140, 230, 0.8)";
        context.strokeStyle = "navy";
        drawHorizontalAxis();
        drawVerticalAxis();
        context.lineWidth = 0.5;
        context.strokeStyle = "navy";
        context.strokeStyle = "darkred";
        drawVerticalAxisTicks();
        drawHorizontalAxisTicks();
        context.restore();
    }
    //绘制水平的小标

    function drawHorizontalAxisTicks() {
        var deltaY;
        for (var i = 1; i < NUM_HORIZONTAL_TICKS; i++) {
            context.beginPath();
            //判断画的是大坐标还是短坐标
            if (i % 5 == 0) {
                deltaY = TICK_WIDTH;
            } else {
                deltaY = TICK_WIDTH / 2
            }


            context.moveTo(AXIS_ORIGIN.x + i * a,
                AXIS_ORIGIN.y - deltaY);
            context.lineTo(AXIS_ORIGIN.x + i * a,
                AXIS_ORIGIN.y);
            context.stroke();
        }
    }

    //绘制数值的小标
    function drawVerticalAxisTicks() {
        var deltaX;
        for (var i = 1; i < NUM_VERTICAL_TICKS; i++) {
            context.beginPath();
            if (i % 5 === 0) {
                deltaX = TICK_WIDTH;
            } else {
                deltaX = TICK_WIDTH / 2;
            }
            context.moveTo(AXIS_ORIGIN.x,
                AXIS_ORIGIN.y - i * b);
            context.lineTo(AXIS_ORIGIN.x + deltaX,
                AXIS_ORIGIN.y - i * b);
            context.stroke();
        }
    }

    //画竖直线
    function drawVerticalAxis() {
        context.beginPath();
        context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
        context.lineTo(AXIS_ORIGIN.x, AXIS_TOP);
        //箭头
        context.lineTo(AXIS_ORIGIN.x - 20, AXIS_TOP + 20);
        context.moveTo(AXIS_ORIGIN.x, AXIS_TOP);
        context.lineTo(AXIS_ORIGIN.x + 20, AXIS_TOP + 20);
        context.strokeStyle = '#00f';

        context.stroke();
    }

    //画水平线
    function drawHorizontalAxis() {
        context.beginPath();
        context.moveTo(AXIS_ORIGIN.x, AXIS_ORIGIN.y);
        context.lineTo(AXIS_RIGHT, AXIS_ORIGIN.y);

        //箭头
        context.lineTo(AXIS_RIGHT - 20, AXIS_ORIGIN.y - 20);
        context.moveTo(AXIS_RIGHT, AXIS_ORIGIN.y);
        context.lineTo(AXIS_RIGHT - 20, AXIS_ORIGIN.y + 20);

        //ctx.lineJoin = 'miter'; //线的连接处采用尖角
        //ctx.lineJoin = 'bevel'; //线的连接处采用方角
        context.lineJoin = 'round'; //线的连接处采用圆角
        context.lineWidth = 2;
        context.strokeStyle = 'blue';
        context.stroke();


    }
    //绘制数字标注
    function drawAxisLabels() {
        context.fillStyle = "blue";
        drawHorizontalAxisLabels();
        drawVerticalAxisLabels();
    }
    //绘制竖直轴标注

    function drawVerticalAxisLabels() {
        context.textAlign = "center";
        context.textBaseline = "top";
        for (var i = 0; i <= NUM_HORIZONTAL_TICKS; i++) {
            if (i % 5 === 0) {
                context.fillText(i,
                    AXIS_ORIGIN.x + i * a,
                    AXIS_ORIGIN.y + SPACE_BETWEEN_ABELS_AND_AXIS);
            }
        }
    }
    //绘制水平轴标注

    function drawHorizontalAxisLabels() {
        context.textAlign = "center";
        context.textBaseline = "middle";
        for (var i = 0; i <= NUM_VERTICAL_TICKS; i++) {
            if (i % 5 === 0) {
                context.fillText(i,
                    AXIS_ORIGIN.x - SPACE_BETWEEN_ABELS_AND_AXIS,
                    AXIS_ORIGIN.y - i * b);
            }
        }
    }

    function drawGrid(color, stepx, stepy) {
        context.save()
        context.strokeStyle = color;
        context.fillStyle = '#ffffff';
        context.lineWidth = 0.5;
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
            context.beginPath();
            context.moveTo(i, 0);
            context.lineTo(i, context.canvas.height);
            context.stroke();
        }
        for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
            context.stroke();
        }
        context.restore();
    }
    context.font = "13px Arial";

    drawGrid("lightgray", 10, 10);

    context.shadowColor = "rgba(100, 140, 230, 0.8)";
    context.shadowOffsetX = 3;
    context.shadowOffsetY = 3;
    context.shadowBlur = 5;

    drawAxes();
    drawAxisLabels();
</script>

</html>