使用canvas绘制网格与坐标轴

最新推荐文章于 2024-06-14 15:00:11 发布

不睡觉的怪叔叔

最新推荐文章于 2024-06-14 15:00:11 发布

阅读量2.4k

点赞数 1

分类专栏：计算机图形学

本文链接：https://blog.csdn.net/qq_35732147/article/details/97677042

版权

计算机图形学专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、绘制网格

二、绘制坐标轴

一、绘制网格

网格效果：

代码：

drawGrid.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制网格</title>
    <style>
        body {
            background: #eee;
        }
        #canvas {
            background: #fff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        // 获取canvas元素
        let canvas = document.getElementById('canvas');
        // 获取canvas绘图环境
        let context = canvas.getContext('2d');

        function drawGrid(stepX, stepY, color, lineWidth){
            // 创建垂直格网线路径
            for(let i = 0.5 + stepX; i < canvas.width; i += stepX){
                context.moveTo(i, 0);
                context.lineTo(i, canvas.height);
            }
            // 创建水平格网线路径
            for(let j = 0.5 + stepY; j < canvas.height; j += stepY){
                context.moveTo(0, j);
                context.lineTo(canvas.width, j);
            }

            // 设置绘制颜色
            context.strokeStyle = color;
            // 设置绘制线段的宽度
            context.lineWidth = lineWidth;
            // 绘制格网
            context.stroke();
            // 清除路径
            context.beginPath();
        }
        drawGrid(10, 10, 'lightgray', 0.5);
    </script>
</body>
</html>

二、绘制坐标轴

坐标轴效果：

‘

代码：

drawAxes.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制坐标轴</title>
    <style>
        body {
            background: #eee;
        }
        #canvas {
            background: #fff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        // 获取canvas元素
        let canvas = document.getElementById('canvas');
        // 获取canvas绘图环境
        let context = canvas.getContext('2d');

        function drawGrid(stepX, stepY, color, lineWidth){
            // 创建垂直格网线路径
            for(let i = 0.5 + stepX; i < canvas.width; i += stepX){
                context.moveTo(i, 0);
                context.lineTo(i, canvas.height);
            }
            // 创建水平格网线路径
            for(let j = 0.5 + stepY; j < canvas.height; j += stepY){
                context.moveTo(0, j);
                context.lineTo(canvas.width, j);
            }

            // 设置绘制颜色
            context.strokeStyle = color;
            // 设置绘制线段的宽度
            context.lineWidth = lineWidth;
            // 绘制格网
            context.stroke();
            // 清除路径
            context.beginPath();
        }
        drawGrid(10, 10, 'lightgray', 0.5);

        function drawAxes(origin, x_Len, y_Len, color, lineWidth){

            // 创建水平坐标轴路径
            context.moveTo(origin[0], origin[1]);
            context.lineTo(origin[0] + x_Len, origin[1]);

            // 创建垂直坐标轴路径
            context.moveTo(origin[0], origin[1]);
            context.lineTo(origin[0], origin[1] - y_Len);

            // 创建坐标轴的刻度线路径
            for(let i = origin[0] + 30; i < x_Len; i += 30){
                context.moveTo(i, origin[1] - 10);
                context.lineTo(i, origin[1] + 10);
            }
            for(let j = origin[1] - 30; j > origin[1] - y_Len; j -= 30){
                console.log(j);
                context.moveTo(origin[0] - 10, j);
                context.lineTo(origin[0] + 10, j);
            }


            // 设置绘制颜色
            context.strokeStyle = color;
            // 设置绘制线段的宽度
            context.lineWidth = lineWidth;
            // 绘制坐标轴
            context.stroke();
            // 清除路径
            context.beginPath();
        }
        drawAxes([30.5, 330.5], 500, 300, 'blue', 2);

    </script>
</body>
</html>

注意：每次调用stroke()方法后一定要记得调用beginPath()方法清除当前存在的路径，否则保留的路径会影响到其他的路径的绘制！

不睡觉的怪叔叔

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
使用canvas绘制网格与坐标轴

目录一、绘制网格二、绘制坐标轴一、绘制网格网格效果：代码： drawGrid.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=...
复制链接

扫一扫

专栏目录