canvas——绘制表格

最新推荐文章于 2024-05-17 11:40:43 发布

sleepwalker_1992

最新推荐文章于 2024-05-17 11:40:43 发布

阅读量9.9k

点赞数 2

分类专栏： canvas

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80568475

版权

canvas 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制表格</title>
</head>
<body>
    <div id="container">
        <canvas id="cavsTable">
            您的浏览器不支持canvas,请升级浏览器
        </canvas>
    </div>
    <script>
        (function(){
            var canvas = document.querySelector('#cavsTable');
            var ctx = canvas.getContext('2d');

            canvas.width = 800;
            canvas.height = 800;
            canvas.style.border = '1px solid red';

            //定义每个小格的宽高
            var rectH = 50;
            var rectW = 50;
            //绘制横线
            for(var i=0; i < canvas.height/rectH; i++){
                ctx.moveTo(0,i*rectH);
                ctx.lineTo(canvas.width,i*rectH);
            }
            //绘制竖线
            for(var j=0; j < canvas.width/rectW; j++){
                ctx.moveTo(j*rectW,0);
                ctx.lineTo(j*rectW,canvas.height);
            }
            ctx.lineWidth = 0.5;
            ctx.strokeStyle = '#555';
            ctx.stroke();
        })();
    </script>
</body>
</html>

效果：

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

sleepwalker_1992

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
canvas——绘制表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>绘制表格</title></head><body> <div id="container"> <ca...
复制链接

扫一扫

专栏目录