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 相关文章推荐
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
HTML文本属性&颜色控制属性的实现
Dec 17 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 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获取301跳转URL简单实例
2013/12/16 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
js 窗口抖动示例
2013/09/04 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python写的ARP攻击代码实例
2014/06/04 Python
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
详解python中asyncio模块
2018/03/03 Python
python实现俄罗斯方块
2018/06/26 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python网络编程之五子棋游戏
2020/05/14 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
程序员求职信
2014/04/16 职场文书
士兵突击观后感
2015/06/16 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
python套接字socket通信
2022/04/01 Python