html5 Canvas画图教程(9)—canvas中画出矩形和圆形
发布时间：2013-01-09 14:48:56 作者：佚名 
我要评论
我要评论本文讲一下在canvas中画出矩形和圆形的办法，他们属于基础图形。当然，基础图形本来不止他们，但在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中连一个正规的画圆的函数都没有，更别提椭圆了。所以画椭圆必须用其他方法模拟，这个比较复杂，我留到后面讲吧。
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中连一个正规的画圆的函数都没有，更别提椭圆了。所以画椭圆必须用其他方法模拟，这个比较复杂，我留到后面讲吧。
相关文章
- Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探讨HTML5中Microdata的使用方法以及2025-04-21
在HTML语法中，表格主要通过< table >、< tr >和< td >3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧2025-04-21- 这篇文章主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSS Grid布局的基础知识和如何实现自动换行的网格布局，感兴趣的朋友一起看看吧2025-04-21
本文介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的2025-03-11- HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用,文章还介绍了高级用法,如存储JSON数据、事2025-03-11
- 在HTML5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨<select>标签的属性、样式，并重点介2025-02-27
本文介绍了HTML5InputDatePicker对象表示HTML``元素,是HTML5中的新对象,介绍了日期、周、月份、时间、日期+时间、本地日期时间等不同类型的日期选择器，感兴趣的朋友一起看2025-02-17
本文介绍了HTML5中的超链接、相对路径和图片的使用方法,超链接可以创建指向另一个文档或页面内部书签的链接,相对路径用于在同一服务器内部跳转页面,图片标签用于引入外部图2025-02-17- 本文介绍了HTML5超链接的创建方法,包括基本语法、创建图像超链接的边框去除方法以及锚点链接的使用,还讨论了超链接的四种不同状态（link、visited、hover、active）的CSS样2025-02-17
最近看一些技术网站发现了details 标签的妙用，这个不用js即可实现展开/收缩信息，很方便用来让用户先才答案，然后下面点击再给出答案的效果，这里就为大家简单介绍一下，2024-11-03
最新评论