使用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('2d');  //getContext() 方法可返回一个对象  
        context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式              
        context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形      
   }  
   draw("canvas");  
  </script>  
  </body>  
  </html>

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

使用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('2d');  //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绘制矩形有哪些方法

关于 "使用canvas绘制矩形有哪些方法" 就介绍到此。希望多多支持编程宝库。

如何解决Canvas图片跨域会遇到的问题：本文讲解"怎么解决Canvas图片跨域会遇到的问题"，用于解决相关问题。尽管不通过 CORS 就可以在 Canvas 画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不 ...