html5Canvas画图教程9—canvas中画出矩形和圆形.docxVIP

本文讲一下在 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  无疑显 得很累赘。所以这种情况我们通常使用以下