canvas基础入门系列教程(4)-绘制矩形

最新推荐文章于 2024-08-18 10:07:21 发布

大地飞鸿

最新推荐文章于 2024-08-18 10:07:21 发布

阅读量424

点赞数

本文链接：https://blog.csdn.net/keledon/article/details/87114619

版权

javascript 同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

html5

10 篇文章 0 订阅

订阅专栏

2.2.绘制矩形

前面章节中我们使用三条线来画一个三角形，同理，也可以用四条线来画出一个矩形，但是这样做代码量会更多，并不推荐这样做，在canvas中提供了相应的方法来快速画出矩形。

2.2.1.strokeRect方法

strockeRect是获取到的2d环境对象上的方法，可以非常方便的画出一个矩形

//语法
ctx.strokeRect(x, y, width, height)

strokeRect接收4个参数，第一个为x的坐标，第二个参数为y轴的坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #cvs{
      border: 1px solid #ddd;
    }
  </style>
</head>
<body>
  <canvas id="cvs" width="600" height="300"></canvas>
  <script>
    //获取到canvas对象
    var oCanvas = document.getElementById('cvs')
    //获取到2d的绘图环境
    var ctx = oCanvas.getContext('2d')
    //画矩形
    ctx.strokeRect(100, 100, 200, 100)
  </script>
</body>
</html>

思考：如何画出一个红色边框的矩形？

2.2.2.fillRect方法

fillRect方法也是2d环境对象中的方法，可以帮助我们画出一个填充的矩形

//语法
ctx.fillRect (x, y, width, height)

fillRect的四个参数和strokeRect的四个参数是一样的，区别是fillRect画出来的矩形是填充的，strokeRect画出来的矩形是描边的

实例代码：

//获取到canvas对象
var oCanvas = document.getElementById('cvs')
//获取到2d的绘图环境
var ctx = oCanvas.getContext('2d')
//画矩形
ctx.strokeRect(100, 100, 200, 100)
ctx.fillRect(360, 100, 200, 100)

和描边颜色设置类似，也可以通过fillStyle设置填充颜色

  //获取到canvas对象
  var oCanvas = document.getElementById('cvs')
  //获取到2d的绘图环境
  var ctx = oCanvas.getContext('2d')
  //设置描边颜色
  ctx.strokeStyle = 'blue'
  //画矩形
  ctx.strokeRect(100, 100, 200, 100)
  //设置填充颜色
  ctx.fillStyle = 'red'
  ctx.fillRect(360, 100, 200, 100)

2.2.3.rect方法

绘制矩形除了strokeRect和fillRect方法以外，还可以使用rect方法,使用rect方法并不会马上绘制出矩形，需要调用stroke或者fill方法才能真实绘制出矩形

 //获取到canvas对象
 var oCanvas = document.getElementById('cvs')
 //获取到2d的绘图环境
 var ctx = oCanvas.getContext('2d')
 ctx.rect(100, 100, 200, 100)
 ctx.stroke()

2.2.4.clearRect方法

clearRect方法可以清除指定区域的内容

//语法
ctx.clearRect(x, y, width, height)

这个方法中的参数和绘制矩形的几个方法参数相同，x，y是起点的坐标，width是清除区域的宽度，height是清除区域的高度

实例：

//获取到canvas对象
var oCanvas = document.getElementById('cvs')
//获取到2d的绘图环境
var ctx = oCanvas.getContext('2d')
ctx.rect(100, 100, 200, 100)
ctx.stroke()
ctx.fillStyle = 'orangered'
ctx.fill()
ctx.clearRect(130,130, 50, 50)