3.3.4_绘制坐标系旁边的文本标签

最新推荐文章于 2022-01-13 11:03:18 发布

信封中的阳光

最新推荐文章于 2022-01-13 11:03:18 发布

阅读量220

点赞数

分类专栏： HTML5_CANVAS练习案例

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

版权

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

81 篇文章 1 订阅

订阅专栏

3.3.4_绘制坐标系旁边的文本标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>绘制坐标系旁边的文本标签</title>
        <style>
            body{
                background: #eee;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 10px;
                margin-top: 10px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1000" height="600"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d'); 
        var H_axis_margin = 50; //水平线距canvas的外边距
        var V_axis_margin = 50; //垂线距canvas的外边距
        var axis_origin = {  
            x:H_axis_margin,
            y:canvas.height - V_axis_margin
        };
        var axis_top = V_axis_margin;
        var axis_right = canvas.width - H_axis_margin;

        var H_tick_spacing = 10;
        var V_tick_spacing = 10;

        var axis_width = axis_right-axis_origin.x; //x轴长度
        var axis_height = axis_origin.y - axis_top; //y轴高度

        var num_V_ticks =axis_height/V_tick_spacing;  //垂线间隔数
        var num_H_ticks = axis_width/H_tick_spacing;  //水平线间隔数

        var tick_width = 10;//间隔线长度

        var space_between_labels_and_axis = 20; //文本标记距离坐标系的距离

        //初始化
        context.strokeStyle = 'gray';

        drawGrid('lightgray', 10, 10);

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

        drawAxes();
        drawAxisLabels();
        //绘制坐标系--------------------------------------------------
        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 = 'darkred';
            drawVerticalAxisTicks();
            drawHorizontalAxisTicks();

            context.restore();
        }

        function drawHorizontalAxis(){
            context.beginPath();
            context.moveTo(axis_origin.x,axis_origin.y);
            context.lineTo(axis_right,axis_origin.y);
            context.stroke();
        }
        function drawVerticalAxis(){
            context.beginPath();
            context.moveTo(axis_origin.x,axis_origin.y);
            context.lineTo(axis_origin.x,axis_top);
            context.stroke();
        }
        function drawVerticalAxisTicks(){
            var deltaX;
            for(var i =0;i<num_V_ticks;i++){
                if(i%5==0){
                    deltaX = tick_width;
                }else{
                    deltaX = tick_width/2;
                }
                context.beginPath();
                context.moveTo(axis_origin.x-deltaX,axis_origin.y-i*V_tick_spacing);
                context.lineTo(axis_origin.x+deltaX,axis_origin.y - i*V_tick_spacing);
                context.stroke();
            }
        }

        function drawHorizontalAxisTicks(){
            var deltaX;
            for(var i =0;i<num_H_ticks;i++){
                if(i%5==0){
                    deltaX = tick_width;
                }else{
                    deltaX = tick_width/2;
                }
                context.beginPath();
                context.moveTo(axis_origin.x+i*H_tick_spacing,axis_origin.y+deltaX);
                context.lineTo(axis_origin.x+i*H_tick_spacing,axis_origin.y-deltaX);
                context.stroke();
            }
        }
        //绘制坐标系文字标记---------------------------------------------------------
        function drawAxisLabels(){
            context.save();
            context.fillStyle = 'blue';
            drawHorizontalAxisLabels();
            drawVerticalAxisLabels();
            context.restore();
        }
        function drawHorizontalAxisLabels(){
            context.textAlign = 'center';
            context.textBaseline = 'top';
            for(var i =0;i<num_H_ticks;i++){
                if(i%5 ===0){
                    context.fillText(i,axis_origin.x+i*H_tick_spacing,axis_origin.y+space_between_labels_and_axis);
                }
            }
        }
        function drawVerticalAxisLabels(){
            context.textAlign = 'right';
            context.textBaseline = 'middle';
            for(var i =0;i<num_V_ticks;i++){
                if(i%5 ===0){
                    context.fillText(i,axis_origin.x-space_between_labels_and_axis,axis_origin.y-i*V_tick_spacing);
                }
            }
        }
        //绘制网格----------------------------------------------------------------
        function drawGrid(color, stepX, stepY) {
            context.save();
            context.shadowColor = undefined;
            context.shadowBlur = 0;
            context.shadowOffsetX = 0;
            context.shadowOffsetY = 0;
            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();
        };
    </script>
</html>

信封中的阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.3.4_绘制坐标系旁边的文本标签

3.3.4_绘制坐标系旁边的文本标签<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>绘制坐标系旁边的文本标签</title> <style> body{ background: #eee; }
复制链接

扫一扫

专栏目录