Canvas学习：绘制矩形

作者：大漠 日期：2017-03-15 点击：4874
Canvas
Canvas学习
会员专栏

特别声明：小站对部分原创文章已开启付费阅读，并开通年费VIP通道，年费价格为 ¥365.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

通过前面教程的学习，我们可以在Canvas中轻易绘制路径（线段）。这仅仅是Canvas中的一小部分，今天我们来看看在Canvas中怎么绘制矩形。

绘制矩形的方法

在Canvas中提供了绘制矩形的API：

  • fillRect(x, y, width, height)：绘制一个填充的矩形
  • strokeRect(x, y, width, height)：绘制一个矩形的边框
  • clearRect(x, y, width, height)：清除指定矩形区域，让清除部分完全透明

除此之外还可以通过Canvas中CanvasRenderingContext2D.rect()路径方法创建矩形。这个方法需要配合CanvasRenderingContext2D.fill()绘制一个填充的矩形，CanvasRenderingContext2D.stroke()绘制一个填充的矩形。另外，还可以直接使用Canvas的绘制路径的方法来绘制矩形。那我们来先看看怎么使用路径绘制矩形。

路径绘制矩形

记得在学习绘制线段的时候，我们知道moveTo()和lineTo()可以绘制线段，如此一来，四条线就能拼出一个矩形，然后通过fill()和stroke()绘制出填充和边框矩形。

function drawScreen () {
    ctx.strokeStyle = '#00';
    ctx.fillStyle = '#9f9'
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(230,30);
    ctx.lineTo(230,200);
    ctx.lineTo(30,200);
    ctx.lineTo(30,30);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(300,30);
    ctx.lineTo(500,30);
    ctx.lineTo(500,200);
    ctx.lineTo(300,200);
    ctx.lineTo(300,30);
    ctx.fill();

}

在Canvas中我们有一个closePath()的方法，在绘制矩形的时候，借助这个方法，我们通过绘制三条线段，就能和起始点闭合，也就绘制出相应的矩形。基于上面的示例，在stroke()和fill()前面添加closePath()即可：

function drawScreen () {
    ctx.strokeStyle = '#00';
    ctx.fillStyle = '#9f9'
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(230,30);
    ctx.lineTo(230,200);
    ctx.lineTo(30,200);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(300,30);
    ctx.lineTo(500,30);
    ctx.lineTo(500,200);
    ctx.lineTo(300,200);
    ctx.closePath();
    ctx.fill();

}

剩余80%内容付费后可查看
* 请输入阅读码（忘记阅读码？）

如需转载，烦请注明出处：https://www.w3cplus.com/canvas/drawing-rectangular.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部