html5 Canvas画图教程(9)―canvas中画出矩形和圆形

名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。

本篇文章的具体介绍如下

本文讲一下在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中连一个正规的画圆的数据库函数都没有，更别提椭圆了。所依画椭圆必须用其他实用具体的方法模拟，这个比较复杂，我留到后面讲吧。