今天小编跟大家讲解下有关html5 Canvas画图教程(9)―canvas中画出矩形和圆形 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html5 Canvas画图教程(9)―canvas中画出矩形和圆形 的相关资料，希望小伙伴们看了有所帮助。
本文讲一下在canvas中画出矩形和圆形的办法 他们属于基础图形。当然 基础图形本来不止他们 但在canvas中 只有画矩形与圆形不需要用其他方法模拟。 canvas画矩形 1 fillRect与strokeRect fillRect可以直接填充出一个矩形 填充样式是你当前设置的样式；同理strokeRect就是直接描边一个矩形 他们的参数是一致的 依次是（起点x坐标,起点y,矩形的宽 矩形的高）。这里的起点 注意 是指矩形的左上角那个点。 我们通常用他们来做简单的事 他们也只能做简单的事。为什么 因为他们画的图形没有“路径”的说法 直接就出来了。 比如你先用fillRect填充了一个矩形 然后你想把这个矩形描边 如果你使用stroke() 则不会有效果 因为此时虽然有个矩形 但并不存在路径。 如果你迫切的想把这个矩形描边 你可以在同样的位置使用strokeRect()来描边一个矩形——但他们其实是独立的 只是位置重叠罢了。 复制代码代码如下: ctx.fillRect(200,100,50,40); ctx.strokeRect(200,100,50,40); 如果我们想要一个又有填充又有描边的矩形 那同时使用fillRect和strokeRect无疑显得很累赘。所以这种情况我们通常使用以下方法。 2,rect rect的参数与fillRect和strokeRect毫无差别 不同的是他画出的只是路径 至于描边或是填充要你后续自己完成。 复制代码代码如下: ctx.rect(300,100,50,40); ctx.stroke() ctx.fill(); 这样做有什么好处呢 前面的文章我提到过 填充或描边会消耗大量资源 所以我们经常（比如循环）需要一次性绘制几百条路径 再来描边或填充。此时使用rect画路径 最后再填充 就避免了fillRect和strokeRec每次都要填充或描边的问题。 3 lineTo 当然你也可以像我的画线条的教程那样 用4个lineTo来画出一个矩形。但这毫无必要 具体可查看那篇文章。 Canvas画圆形 苍天无眼 其实canvas并没有一个真正的可以直接画出圆形的函数 他画的其实是一个360度的圆弧 看起来就是个圆形了。 canvas画圆弧的函数我们前面讲过了 即arc.我们用他来画一个圆形： 复制代码代码如下: ctx.arc(300+25,100+20,20,0,Math.PI*2); ctx.stroke() ctx.fill(); 这个arc和rect一样 画出的也是路径 填充或描边需要后续完成。 但要注意的是 圆形的位置判断和矩形是不一样的。我们以矩形的左上角为起点确定他的位置 但圆形的位置我们通常用圆心来确定。 如果你想画一组水平和垂直都居中的矩形与圆形 那你可要记得不要把矩形的起点当成了画圆形的起点——圆形的起点可是圆心哈！ 算了 我还是给你一个现在的公式吧 对齐的圆与矩形 圆心的坐标=矩形的坐标+矩形的一半宽高。 也就是圆心x=矩形x+矩形宽/2,圆形y=矩形y+矩形高/2。这样他们就是绝对对齐了的。 虽然arc没有直接画圆的方法那么好用——我设想的直接画圆的方法只需要3个参数 即圆心坐标即半径——但arc不止可以画圆 还可以画半圆什么的 所以功能更强大 用着也将就了。 既然有圆 那么就应该有椭圆 但canvas中连一个正规的画圆的函数都没有 更别提椭圆了。所以画椭圆必须用其他方法模拟 这个比较复杂 我留到后面讲吧。来源：爱蒂网
