画一个让人眼花的图形

最新推荐文章于 2024-10-18 23:15:12 发布

原创最新推荐文章于 2024-10-18 23:15:12 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

HTML5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas API绘制规则矩形网格的方法。通过JavaScript编程实现了一个简单的绘图程序，该程序能够在网页上均匀地绘制一系列90x90像素的矩形，这些矩形以100像素为间隔排列。此示例适用于前端开发人员，特别是那些希望了解如何利用Canvas进行基本图形绘制的人。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>规则矩形</title>
    <script>
        var ctx;
        var post1=[];
        function getpos(){
            var i;
            var j;
            for(i=10;i<500;i=i+100){
                for(j=10;j<500;j=j+100){
                    post1.push([i,j]);
                }
            }
        }
        function init(){
            ctx=document.getElementById('canvas').getContext('2d');
            getpos();
            var i;
            var po;
            for(i=0;i<post1.length;i++){
                po=post1[i];
                ctx.fillRect(po[0],po[1],90,90);
            }
       }
    </script>
</head>
<body onLoad="init();">
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>