如何用canvas绘制矩形？

百变鹏仔 3个月前 (10-18) #H5教程

文章标签矩形

canvas元素使用javascript在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以，如何用canvas绘制一个矩形呢？接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容，若是有需要的话可以看看。

我们需要知道的是在canvas中与矩形相关的方法是rect()，使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。

rect()方法能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。

下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。

首先，我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。

fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。

    <!DOCTYPE html>      <html>      <head>      <meta charset="utf-8" />      <title>用canvas画矩形</title>      <style>      </style>      </head>      <body>      <canvas id="canvas" width="600" height="400"></canvas>      <script type="text/javascript">        function draw(id){            var canvas = document.getElementById(id);            var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象            context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式                        context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形           }       draw("canvas");      </script>      </body>      </html>

canvas画有填充矩形的效果如下：

然后我们来看一看利用canvas中strokerect()方法绘制的无填充的矩形实例。

strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>用canvas画矩形</title><style></style></head><body><canvas id="canvas" width="600" height="400"></canvas><script type="text/javascript">  function draw(id){      var canvas = document.getElementById(id);      var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象      context.strokeStyle = "pink";  //图形边框的填充颜色      context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：           context.strokeRect(50,50,180,120);  //绘制矩形（无填充）      context.strokeRect(110,110,180,120);       } draw("canvas");</script></body></html>

canvas画无填充矩形的效果如下：

最后本篇文章到这里就结束了，关于canvas更多的相关知识可以参考HTML5开发手册。

文章推荐

如何用canvas绘制矩形？

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集