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


Posted in HTML / CSS onJanuary 09, 2013

本文讲一下在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一样,画出的也是路径,填充或描边需要后续完成。
但要注意的是,圆形的位置判断和矩形是不一样的。我们以矩形的左上角为起点确定他的位置,但圆形的位置我们通常用圆心来确定。
如果你想画一组水平和垂直都居中的矩形与圆形,那你可要记得不要把矩形的起点当成了画圆形的起点——圆形的起点可是圆心哈!
html5 Canvas画图教程(9)—canvas中画出矩形和圆形 
算了,我还是给你一个现在的公式吧,对齐的圆与矩形,圆心的坐标=矩形的坐标+矩形的一半宽高。
也就是圆心x=矩形x+矩形宽/2,圆形y=矩形y+矩形高/2。这样他们就是绝对对齐了的。
虽然arc没有直接画圆的方法那么好用——我设想的直接画圆的方法只需要3个参数,即圆心坐标即半径——但arc不止可以画圆,还可以画半圆什么的,所以功能更强大,用着也将就了。
既然有圆,那么就应该有椭圆,但canvas中连一个正规的画圆的函数都没有,更别提椭圆了。所以画椭圆必须用其他方法模拟,这个比较复杂,我留到后面讲吧。
HTML / CSS 相关文章推荐
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 #HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 #HTML / CSS
You might like
深入解析php之sphinx
2013/05/15 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
php操作xml
2013/10/27 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
php的socket编程详解
2016/11/20 PHP
显示、隐藏密码
2006/07/01 Javascript
js程序中美元符号$是什么
2008/06/05 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python中字典增加和删除使用方法
2020/09/30 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
顶岗实习接收函
2014/01/09 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
七年级思品教学反思
2016/02/20 职场文书
2019财务转正述职报告
2019/06/27 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript