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

编辑Tag赚U币

推荐:HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
可缩放矢量图形(Scalable Vector Graphics,简称SVG)是一种使用XML来描述二维图形的语言(SVG严格遵从XML语法),SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象,感兴趣的朋友可以了解下,或许对你的html5 SVG 2D知识增长有所帮助

本文讲一下在canvas中画出矩形和圆形的办法,他们属于基础图形。当然,基础图形本来不止他们,但在canvas中,只有画矩形与圆形不需要用其他方法模拟。

canvas画矩形
1,fillRect与strokeRect
fillRect可以直接填充出一个矩形,填充样式是你当前设置的样式;同理strokeRect就是直接描边一个矩形
他们的参数是一致的,依次是(起点x坐标,起点y,矩形的宽,矩形的高)。这里的起点,注意,是指矩形的左上角那个点。
我们通常用他们来做简单的事,他们也只能做简单的事。为什么?因为他们画的图形没有“路径”的说法,直接就出来了。
比如你先用fillRect填充了一个矩形,然后你想把这个矩形描边,如果你使用stroke(),则不会有效果,因为此时虽然有个矩形,但并不存在路径。
如果你迫切的想把这个矩形描边,你可以在同样的位置使用strokeRect()来描边一个矩形——但他们其实是独立的,只是位置重叠罢了。

复制代码 代码如下:www.mb5u.com

ctx.fillRect(200,100,50,40);
ctx.strokeRect(200,100,50,40);

如果我们想要一个又有填充又有描边的矩形,那同时使用fillRect和strokeRect无疑显得很累赘。所以这种情况我们通常使用以下方法。

2,rect
rect的参数与fillRect和strokeRect毫无差别,不同的是他画出的只是路径,至于描边或是填充要你后续自己完成。

复制代码 代码如下:www.mb5u.com

ctx.rect(300,100,50,40);
ctx.stroke()
ctx.fill();

这样做有什么好处呢?前面的文章我提到过,填充或描边会消耗大量资源,所以我们经常(比如循环)需要一次性绘制几百条路径,再来描边或填充。此时使用rect画路径,最后再填充,就避免了fillRect和strokeRec每次都要填充或描边的问题。

3,lineTo
当然你也可以像我的画线条的教程那样,用4个lineTo来画出一个矩形。但这毫无必要,具体可查看那篇文章。

Canvas画圆形
苍天无眼,其实canvas并没有一个真正的可以直接画出圆形的函数,他画的其实是一个360度的圆弧,看起来就是个圆形了。
canvas画圆弧的函数我们前面讲过了,即arc.我们用他来画一个圆形:

复制代码 代码如下:www.mb5u.com

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中连一个正规的画圆的函数都没有,更别提椭圆了。所以画椭圆必须用其他方法模拟,这个比较复杂,我留到后面讲吧。

分享:HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了,在这里就不多说了,感兴趣的朋友可以了解下,或许本文对你的了解SVG的图形绘制有所帮助

来源:未知//所属分类:HTML5教程/更新时间:2013-04-22
相关HTML5教程