使用HTML5canvas绘制一个矩形的方法

这篇文章将为大家详细讲解有关使用HTML5 canvas绘制一个矩形的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

公司主营业务：网站建设、成都做网站、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联建站是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联建站推出唐河免费做网站回馈大家。

使用HTML5 canvas绘制一个矩形，我们需要用到Canvas上下文的rect（）方法。

我们来看一个具体的例子

代码如下

  
  
  
  


  
  
Canvas Demo

说明：

由document.getElementById()方法获取Canves对象，Canves对象通过调用getContext()方法，用于获取画布上下文的过程是与在画布上绘制时共同处理的。

调用上下文的beginPath()方法来启动路径。用rect()绘制一个矩形。rect的第一个参数和的第二个参数是矩形左上角的X，Y坐标。第三个参数是绘制矩形的宽度，第四个参数是绘制矩形的高度。

使用fill()方法填充内部并使用stroke方法绘制轮廓线。

运行结果

使用Web浏览器执行创建的HTML文件。将显示如下所示的效果。

上述示例的矩形填充了内部，下面我们来看看没有内部填充的矩形

代码如下

  
  
  
  
  


  
  
Canvas Demo

说明：在绘制图像时，如果不调用fill（）方法，只执行stroke（）方法，就能绘制内部不填充的矩形。

运行结果

在浏览器上显示如下效果

最后我们来看直接填充内部的矩形绘制

  
  
  
  


  
  
Canvas Demo

运行结果如下所示

关于使用HTML5 canvas绘制一个矩形的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。