canvas绘制矩形,使用canvas绘制图形,下面哪个方法可以绘制矩形?

　　本文谈的是在画布上画矩形和圆形的方法，属于基本图形。当然，基本图形不限于它们，在canvas中，只画矩形和圆形，不需要用其他方法模拟。canvas画矩形1，fillRect与strokeRect

　　Rect可以直接填充矩形，填充样式就是你当前设置的那个；同样，strokeRect是直接描边矩形。

　　它们的参数相同，依次为(起点x坐标，起点y，矩形宽度，矩形高度)。这里的起点，注意，是指矩形左上角的点。

　　我们平时用它们做简单的事情，它们也只会做简单的事情。为什么？因为他们画的图里面没有“路径”，直接就出来了。

　　例如，首先用fillRect填充一个矩形，然后想要描边该矩形。如果使用stroke()，它将没有任何效果，因为即使有一个矩形，也没有路径。

　　如果想紧急描边这个矩形，可以用strokeRect()在同一个位置描边一个矩形——，但它们其实是独立的，只是位置重叠而已。复制代码如下：

　　ctx.fillRect(200，100，50，40)；

　　ctx.strokeRect(200，100，50，40)；

　　如果我们想要一个有padding和strokes的矩形，同时使用fillRect和strokeRect无疑是很繁琐的。所以在这种情况下，我们通常采用以下方法。2,rect Rect的参数与fillRect和strokeRect的参数相同。不同的是，它只画路径。至于描摹或者填充，后面还得自己完成。复制代码如下：

　　ctx.rect(300，100，50，40)；

　　ctx.stroke()

　　CTX . fill()；

　　这样有什么好处？我在上一篇文章里提到过，填充或者描边会消耗很多资源，所以我们经常(比如循环)需要一下子画几百条路径，然后描边或者填充。这时候用rect画路径，然后填充，避免了fillRect和strokeRec每次都要填充或者描边的问题。3，lineTo

　　当然，你也可以画一个有四条线的矩形，就像我的画线教程一样。但这不是必须的。有关详细信息，请参阅该文章。Canvas画圆形 苍天无眼。其实canvas并没有真正的可以直接画圆的功能。他画的其实是一个360度的圆弧，看起来像一个圆。

　　Canvas画圆弧的功能前面已经提到了，就是圆弧。我们用它来画一个圆：复制代码代码如下：

　　ctx.arc(300 25，100 20，20，0，数学。PI * 2)；

　　ctx.stroke()

　　CTX . fill()；

　　这个弧和rect一样，画的是路径，填色或者描边需要后期做。

　　但需要注意的是，圆的位置判断和矩形的位置判断是不一样的。我们用矩形的左上角作为起点来确定他的位置，但是我们通常用圆心来确定圆的位置。

　　如果你想画一组水平居中和垂直居中的矩形和圆，那么你要记住不要把矩形的起点当成圆的起点。圆的起点就是圆心！

　　算了，还是给你个通用公式吧。对齐的圆和矩形，圆心的坐标=矩形的坐标，矩形宽度和高度的一半。

　　即圆心x=矩形x矩形宽度/2，圆y=矩形y矩形高度/2。所以他们是绝对一致的。

　　虽然圆弧没有直接画圆的方法好用3354，但是我想象的直接画圆的方法只需要三个参数，即圆心坐标，也就是3354的半径。但是arc不仅可以画圆，还可以画半圆什么的，所以比较厉害，就将就一下吧。

　　既然有圆，那么就应该有椭圆，但是连一个在画布上画圆的形式函数都没有，更别说椭圆了。所以画椭圆必须用其他方法模拟。这个比较复杂，以后再说。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。