怎样用canvas画网格背景？

最新推荐文章于 2024-05-08 13:42:39 发布

迷沉

最新推荐文章于 2024-05-08 13:42:39 发布

阅读量2k

点赞数

分类专栏： js 文章标签：网格 canvas 背景

本文链接：https://blog.csdn.net/huanglaoer123123/article/details/107139755

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

展示效果
在这里插入图片描述
整个代码

<!doctype html>
<html lang="zh-zn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background: #eeeeee;
            margin: 0;
            padding: 0;
        }
        #canvas {
             background: #ffffff;
             border: 1px solid #ccc;
            box-sizing: border-box;
            cursor: pointer;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="1900" height="800"
        style="border:1px solid #000000;">
</canvas>

<script>
    var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    function drawGrid(color, stepx, stepy) {
        context.save()
        context.fillStyle = 'white';
        console.log(context);
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        context.lineWidth = 0.5;
        context.strokeStyle = color;
        for (var i = stepx; i < context.canvas.width; i += stepx) {
            context.beginPath();
            context.moveTo(i, 0);
            context.lineTo(i, context.canvas.height);
            context.closePath();
            context.stroke();
        }
        for (var j = stepy; j < context.canvas.height; j += stepy) {
            context.beginPath();
            context.moveTo(0, j);
            context.lineTo(context.canvas.width, j);
            context.closePath();
            context.stroke();
        }
        context.restore();
    }
    drawGrid('#ccc', 20, 20);
</script>
</body>
</html>

迷沉

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
6
评论
怎样用canvas画网格背景？

展示效果整个代码<!doctype html><html lang="zh-zn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
复制链接

扫一扫