2.8.3_坐标轴的绘制

最新推荐文章于 2024-03-04 10:36:32 发布

信封中的阳光

最新推荐文章于 2024-03-04 10:36:32 发布

阅读量340

点赞数

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71078114

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章 1 订阅

订阅专栏

2.8.3_坐标轴的绘制

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>坐标轴的绘制</title>
        <style>
        body{
            background: #000000;
        }
            #canvas{
                background: #fff;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1100" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),

            AXIS_MARGIN = 40,   //坐标系外间距
            AXIS_ORIGIN = { x:AXIS_MARGIN ,y:canvas.height-AXIS_MARGIN}, //坐标系原点

            AXIS_TOP_Y = AXIS_MARGIN,   //Y轴顶点
            AXIS_RIGHT_X = canvas.width-AXIS_MARGIN,    //X轴顶点

            HORIZONTAL_TICK_SPACING = 10, // X轴间隔
            VERTIVAL_TICK_SPACING = 10, //Y轴间隔

            AXIS_WIDTH = AXIS_RIGHT_X - AXIS_ORIGIN.x,//X轴长
            AXIS_HEIGHT= AXIS_ORIGIN.y-AXIS_TOP_Y, //Y轴长

            NUM_VERTICAL_TICKS = AXIS_HEIGHT/VERTIVAL_TICK_SPACING,
            NUM_HORIZONTAL_TICKS = AXIS_WIDTH/HORIZONTAL_TICK_SPACING,

            TICK_WIDTH = 10, //长间隔线的宽度
            TICK_LINEWIDTH = 0.5, //间隔线的线高
            TICK_COLOR = 'navy', //间隔线的颜色

            AXIS_LINEWIDTH = 1.0, //X轴Y轴线的线线高
            AXIS_COLOR = 'blue';  //X轴Y轴线的线颜色
            drawGrid('lightgray',10,10);
            drawAxis();

            function drawAxis(){
                context.save();
                context.strokeStyle = AXIS_COLOR;
                context.lineWidth = AXIS_LINEWIDTH;

                drawHorizontalAxis(); //画X轴
                drawVerticalAxis(); //画Y轴

                context.strokeStyle = TICK_COLOR;
                context.LINE_WIDTH = TICK_LINEWIDTH;

                drawVerticalAxisTick(); //画y轴间隔线
                drawHorizontalAxisTick();//画X轴间隔线
                context.restore();

            }
            //画水平间隔线
            function drawHorizontalAxisTick(){
                var deltaY;
                for(var i=0;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*HORIZONTAL_TICK_SPACING,AXIS_ORIGIN.y+deltaY);
                    context.lineTo(AXIS_ORIGIN.x+i*HORIZONTAL_TICK_SPACING,AXIS_ORIGIN.y-deltaY);
                    context.stroke();
                }
            }
            //画y轴间隔线
            function drawVerticalAxisTick(){
                var deltaX;
                for(var i = 0;i<NUM_VERTICAL_TICKS;++i){
                    context.beginPath();
                    if(i%5===0){
                        deltaX = TICK_WIDTH;
                    }else{
                        deltaX = TICK_WIDTH/2;
                    }
                    context.moveTo(AXIS_ORIGIN.x-deltaX,AXIS_ORIGIN.y-i*VERTIVAL_TICK_SPACING);
                    context.lineTo(AXIS_ORIGIN.x+deltaX,AXIS_ORIGIN.y-i*VERTIVAL_TICK_SPACING);
                    context.stroke();
                }
            }
            //画X轴
            function drawHorizontalAxis(){
                context.beginPath();
                context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);
                context.lineTo(AXIS_RIGHT_X,AXIS_ORIGIN.y);
                context.stroke();
            }
            //画Y轴
            function drawVerticalAxis(){
                context.beginPath();
                context.moveTo(AXIS_ORIGIN.x,AXIS_ORIGIN.y);
                context.lineTo(AXIS_TOP_Y,AXIS_ORIGIN.x);
                context.stroke();
            }
            //绘制网格线
            function drawGrid(color,stepX,stepY){
                context.strokeStyle =color;
                context.lineWidth = 0.5;

                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();
                }
            }
    </script>
</html>