特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
通过前面教程的学习,我们可以在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();
}
如需转载,烦请注明出处:https://www.w3cplus.com/canvas/drawing-rectangular.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!