HTML5中的canvas绘制三个矩形

最新推荐文章于 2026-03-29 03:43:20 发布

原创最新推荐文章于 2026-03-29 03:43:20 发布 · 1.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

这篇博客展示了如何使用HTML5的canvas元素绘制三个矩形。通过JavaScript代码动态地在canvas上画出不同位置的矩形，强调了canvas的绘图能力和在网页中的应用。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>绘制三个矩形</title>
       <style>
           body{
               width: 100%;
               height: 100%;
               background: black;
           }

           #canvas{
               background: #ffffff;
           }
       </style>
   </head>
   <body>

       <canvas id="canvas" width="400" height="400">
           你的浏览器不支持
       </canvas>

       



       <script>

           var oC = document.getElementById("canvas")
           var oGC = oC.getContext("2d") //获取绘制图片的"2d"环境

//           oGC.strokeRect(50,50,100,100)
//           oGC.strokeRect(150.5,50,100,100)
//           oGC.strokeRect(250.5,50,100,100) //绘制填充的"黑色"的矩形

//用变量代替出来找出i的值
for(var i=0;i<3;i++){
   oGC.strokeRect(50.5*(2*i+1),50.5,100,100)
}

       </script>

   </body>
</html>