HTML5新增标签--canvas之绘制矩形

最新推荐文章于 2024-03-27 22:07:10 发布

原创最新推荐文章于 2024-03-27 22:07:10 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 #canvas #绘图 #绘制矩形

实用同时被 2 个专栏收录

43 篇文章

订阅专栏

HTML5

17 篇文章

订阅专栏

本文详细介绍如何使用HTML5的Canvas元素进行基本图形绘制，包括设置画布背景、使用strokeRect绘制并排图形，并通过循环简化重复代码。文章提供了一个实际的代码示例，展示了如何在网页中创建和操作一个400x400像素的画布。

<!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")
   //   (x,y,width,height)
// oGC.fillRect(50,50,100,100) fillrect纯色
// oGC.fillStyle="red" 修改颜色
//   oGC.strokeRect(50,50,100,100) strokeRect线条
// oGC.clearRect(x,y,oC.width,oC.height) 清除矩形区域【对应练习小方块运动】

// 练习: 描绘三个并排图形
//原始写法
//           oGC.strokeRect(50,50,100,100)
//           oGC.strokeRect(150,50,100,100) x+上面图形的宽
//           oGC.strokeRect(250,50,100,100)

   //便捷写法
           for (var i=0;i<3;i++) {
               oGC.strokeRect(50*(2*i+1),50,100,100)
           }
       </script>
   </body>
</html>

注意点:画布的比例是1:2，所以样式要写在标签里面，不能写在css样式表里。